fix: examples and patch hub-web to use grpc-web default export (#867)

* fix chron-feed example

* update chron-feed example

* intermediate commit

* add chron-feed hub-web example

* add changeset

* remove commented out imports from example

.changeset/nervous-toes-look.md

@@ -0,0 +1,5 @@
+---
+'@farcaster/hub-web': patch
+---
+
+fix: use @improbable-eng/grpc-web default export to improve compatibility

packages/hub-nodejs/examples/chron-feed/index.ts

@@ -3,7 +3,7 @@
 import {
   CastAddMessage,
   fromFarcasterTime,
-  getInsecureHubRpcClient,
+  getSSLHubRpcClient,
   HubAsyncResult,
   HubRpcClient,
   isCastAddMessage,
@@ -41,6 +41,17 @@ const getPrimaryCastsByFid = async (fid: number, client: HubRpcClient): HubAsync
   return ok(casts.filter((message) => !message.data.castAddBody.parentCastId));
 };
 
+const getFnameFromFid = async (fid: number, client: HubRpcClient): HubAsyncResult<string> => {
+  const result = await client.getUserData({ fid: fid, userDataType: UserDataType.FNAME });
+  return result.map((message) => {
+    if (isUserDataAddMessage(message)) {
+      return message.data.userDataBody.value;
+    } else {
+      return '';
+    }
+  });
+};
+
 /**
  * Compares two CastAddMessages by timestamp, in reverse chronological order.
  */
@@ -57,24 +68,39 @@ const compareCasts = (a: CastAddMessage, b: CastAddMessage) => {
 /**
  * Converts a CastAddMessage into a printable string representation.
  */
-const castToString = (cast: CastAddMessage, nameMapping: Map<number, string>) => {
+const castToString = async (cast: CastAddMessage, nameMapping: Map<number, string>, client: HubRpcClient) => {
   const fname = nameMapping.get(cast.data.fid);
 
   // Convert the timestamp to a human readable string
   // Safety: OK to do this since we know the timestamp coming from the Hub must be in the valid range
   const unixTime = fromFarcasterTime(cast.data.timestamp)._unsafeUnwrap();
   const dateString = timeAgo.format(new Date(unixTime));
 
+  const { text, mentions, mentionsPositions } = cast.data.castAddBody;
+  const encoder = new TextEncoder();
+  const bytes = encoder.encode(text);
+
+  const decoder = new TextDecoder();
+  let textWithMentions = '';
+  let indexBytes = 0;
+  for (let i = 0; i < mentions.length; i++) {
+    textWithMentions += decoder.decode(bytes.slice(indexBytes, mentionsPositions[i]));
+    const result = await getFnameFromFid(mentions[i], client);
+    result.map((fname) => (textWithMentions += fname));
+    indexBytes = mentionsPositions[i];
+  }
+  textWithMentions += decoder.decode(bytes.slice(indexBytes));
+
   // Remove newlines from the message text
-  const textNoLineBreaks = cast.data.castAddBody.text.replace(/(\r\n|\n|\r)/gm, ' ');
+  const textNoLineBreaks = textWithMentions.replace(/(\r\n|\n|\r)/gm, ' ');
 
   return `${fname}: ${textNoLineBreaks}\n${dateString}\n`;
 };
 
 (async () => {
   // Set address as an environment variable or pass in directly here
-  const client = getInsecureHubRpcClient(HUB_URL);
-  // const client = getSSLHubRpcClient(HUB_URL); // Use this if you're using SSL
+  // const client = getInsecureHubRpcClient(HUB_URL); // Use this if you're not using SSL
+  const client = getSSLHubRpcClient(HUB_URL);
 
   // 1. Create a mapping of fids to fnames, which we'll need later to display messages
   const fidToFname = new Map<number, string>();
@@ -107,7 +133,7 @@ const castToString = (cast: CastAddMessage, nameMapping: Map<number, string>) =>
   }
 
   const sortedCasts = castsResult.value.flat().sort(compareCasts); // sort casts by timestamp
-  const stringifiedCasts = sortedCasts.map((c) => castToString(c, fidToFname)); // convert casts to printable strings
+  const stringifiedCasts = await Promise.all(sortedCasts.map((c) => castToString(c, fidToFname, client))); // convert casts to printable strings
 
   for (const outputCast of stringifiedCasts) {
     console.log(outputCast);

packages/hub-nodejs/examples/chron-feed/package.json

@@ -8,7 +8,7 @@
     "start": "tsx index.ts"
   },
   "dependencies": {
-    "@farcaster/hub-nodejs": "^0.5.0",
+    "@farcaster/hub-nodejs": "^0.6.3",
     "javascript-time-ago": "^2.5.9"
   },
   "devDependencies": {