🌺 Lens and Hey v3: v30 (#lens-v3)

Summary: Migrated to Lens v3, updating terminology and types. Highlights: • Replaced "Mirror" with "Repost" across components and tracking. • Updated GraphQL queries to include `groupStats` and `totalMembers`. • Removed unused imports and functions, such as `hasOptimisticallyCollected`. Read more: https://pierre.co/hey/hey/lens-v3
heyxyz · Dec 6, 2024 · 4fa6363 · 4fa6363
1 parent ebbe5f4
commit 4fa6363
Show file tree

Hide file tree

Showing 37 changed files with 167 additions and 279 deletions.
diff --git a/apps/api/tests/analytics/overview.spec.ts b/apps/api/tests/analytics/overview.spec.ts
@@ -16,7 +16,7 @@ describe("GET /analytics/overview", () => {
       expect(item).toHaveProperty("likes");
       expect(item).toHaveProperty("comments");
       expect(item).toHaveProperty("collects");
-      expect(item).toHaveProperty("mirrors");
+      expect(item).toHaveProperty("reposts");
       expect(item).toHaveProperty("quotes");
       expect(item).toHaveProperty("mentions");
       expect(item).toHaveProperty("follows");

diff --git a/apps/og/src/app/posts/[id]/page.tsx b/apps/og/src/app/posts/[id]/page.tsx
@@ -87,7 +87,7 @@ export const generateMetadata = async ({
       "count:actions": targetPost.stats.countOpenActions,
       "count:comments": targetPost.stats.comments,
       "count:likes": targetPost.stats.reactions,
-      "count:mirrors": targetPost.stats.reposts,
+      "count:reposts": targetPost.stats.reposts,
       "count:quotes": targetPost.stats.quotes,
       "lens:id": targetPost.id,
       ...getCollectModuleMetadata(targetPost)
@@ -128,7 +128,7 @@ const Page = async ({ params }: Props) => {
             <a href={postUrl}>Likes: {metadata.other?.["count:likes"]}</a>
           </li>
           <li>
-            <a href={postUrl}>Mirrors: {metadata.other?.["count:mirrors"]}</a>
+            <a href={postUrl}>Reposts: {metadata.other?.["count:reposts"]}</a>
           </li>
           <li>
             <a href={`${postUrl}/quotes`}>

diff --git a/apps/web/src/components/Analytics/Overview.tsx b/apps/web/src/components/Analytics/Overview.tsx
@@ -39,7 +39,7 @@ const Overview: FC = () => {
       likes: number;
       comments: number;
       collects: number;
-      mirrors: number;
+      reposts: number;
       quotes: number;
       mentions: number;
       follows: number;
@@ -79,7 +79,7 @@ const Overview: FC = () => {
     "Likes",
     "Comments",
     "Collects",
-    "Mirrors",
+    "Reposts",
     "Quotes",
     "Mentions",
     "Follows",

diff --git a/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx b/apps/web/src/components/Composer/Actions/ReferenceSettings/index.tsx
@@ -65,18 +65,18 @@ const ReferenceSettings: FC = () => {
 
   const getSelectedReferenceModuleTooltipText = () => {
     if (isMyFollowers) {
-      return "My followers can comment and mirror";
+      return "My followers can comment and repost";
     }
 
     if (isMyFollows) {
-      return "My follows can comment and mirror";
+      return "My follows can comment and repost";
     }
 
     if (isFriendsOfFriends) {
-      return "Friend of friends can comment and mirror";
+      return "Friend of friends can comment and repost";
     }
 
-    return "Everyone can comment and mirror";
+    return "Everyone can comment and repost";
   };
 
   return (

diff --git a/apps/web/src/components/Group/Details.tsx b/apps/web/src/components/Group/Details.tsx
@@ -3,17 +3,19 @@ import Markup from "@components/Shared/Markup";
 import Slug from "@components/Shared/Slug";
 import getMentions from "@hey/helpers/getMentions";
 import humanize from "@hey/helpers/humanize";
-import type { Group } from "@hey/indexer";
+import type { Group, GroupStatsResponse } from "@hey/indexer";
 import { H3, H4, Image, LightBox } from "@hey/ui";
 import Link from "next/link";
+import plur from "plur";
 import type { FC } from "react";
 import { useState } from "react";
 
 interface DetailsProps {
   group: Group;
+  stats: GroupStatsResponse;
 }
 
-const Details: FC<DetailsProps> = ({ group }) => {
+const Details: FC<DetailsProps> = ({ group, stats }) => {
   const [expandedImage, setExpandedImage] = useState<null | string>(null);
 
   return (
@@ -47,10 +49,12 @@ const Details: FC<DetailsProps> = ({ group }) => {
       <div className="space-y-5">
         <Link
           className="text-left outline-offset-4"
-          href={`/g/${group.metadata?.slug}/members`}
+          href={`/g/${group.address}/members`}
         >
-          <H4>{humanize(group.totalMembers)}</H4>
-          <div className="ld-text-gray-500">Members</div>
+          <H4>{humanize(stats.totalMembers)}</H4>
+          <div className="ld-text-gray-500">
+            {plur("Member", stats.totalMembers)}
+          </div>
         </Link>
         <JoinLeaveButton group={group} />
       </div>

diff --git a/apps/web/src/components/Group/index.tsx b/apps/web/src/components/Group/index.tsx
@@ -4,7 +4,11 @@ import Cover from "@components/Shared/Cover";
 import { Leafwatch } from "@helpers/leafwatch";
 import { APP_NAME, STATIC_IMAGES_URL } from "@hey/data/constants";
 import { PAGEVIEW } from "@hey/data/tracking";
-import { type Group, useGroupQuery } from "@hey/indexer";
+import {
+  type Group,
+  type GroupStatsResponse,
+  useGroupQuery
+} from "@hey/indexer";
 import { GridItemEight, GridItemFour, GridLayout } from "@hey/ui";
 import type { NextPage } from "next";
 import { useRouter } from "next/router";
@@ -21,23 +25,26 @@ const ViewGroup: NextPage = () => {
   const {
     isReady,
     pathname,
-    query: { slug }
+    query: { address }
   } = useRouter();
   const { currentAccount } = useAccountStore();
 
-  const showMembers = pathname === "/g/[slug]/members";
+  const showMembers = pathname === "/g/[address]/members";
 
   useEffect(() => {
     if (isReady) {
       Leafwatch.track(PAGEVIEW, {
         page: "group",
-        subpage: pathname.replace("/g/[handle]", "")
+        subpage: pathname.replace("/g/[address]", "")
       });
     }
-  }, [slug]);
+  }, [address]);
 
   const { data, loading, error } = useGroupQuery({
-    variables: { request: { group: slug } }
+    variables: {
+      groupRequest: { group: address },
+      groupStatsRequest: { group: address }
+    }
   });
 
   if (!isReady || loading) {
@@ -53,6 +60,7 @@ const ViewGroup: NextPage = () => {
   }
 
   const group = data.group as Group;
+  const stats = data.groupStats as GroupStatsResponse;
 
   return (
     <>
@@ -65,11 +73,11 @@ const ViewGroup: NextPage = () => {
       />
       <GridLayout>
         <GridItemFour>
-          <Details group={group} />
+          <Details group={group} stats={stats} />
         </GridItemFour>
         <GridItemEight className="space-y-5">
           {showMembers ? (
-            <Members address={group.address} slug={group.metadata?.slug} />
+            <Members address={group.address} />
           ) : (
             <>
               {currentAccount && group.isMember && (

diff --git a/apps/web/src/components/Post/Actions/Share/Repost.tsx b/apps/web/src/components/Post/Actions/Share/Repost.tsx
@@ -2,16 +2,12 @@ import { useApolloClient } from "@apollo/client";
 import { MenuItem } from "@headlessui/react";
 import errorToast from "@helpers/errorToast";
 import { Leafwatch } from "@helpers/leafwatch";
-import hasOptimisticallyMirrored from "@helpers/optimistic/hasOptimisticallyMirrored";
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
 import { Errors } from "@hey/data/errors";
 import { POST } from "@hey/data/tracking";
-import {
-  type CreateRepostRequest,
-  type Post,
-  TriStateValue,
-  useRepostMutation
-} from "@hey/indexer";
+import selfFundedTransactionData from "@hey/helpers/selfFundedTransactionData";
+import sponsoredTransactionData from "@hey/helpers/sponsoredTransactionData";
+import { type Post, TriStateValue, useRepostMutation } from "@hey/indexer";
 import { OptmisticPostType } from "@hey/types/enums";
 import type { OptimisticTransaction } from "@hey/types/misc";
 import cn from "@hey/ui/cn";
@@ -21,6 +17,8 @@ import { toast } from "react-hot-toast";
 import { useAccountStatus } from "src/store/non-persisted/useAccountStatus";
 import { useAccountStore } from "src/store/persisted/useAccountStore";
 import { useTransactionStore } from "src/store/persisted/useTransactionStore";
+import { sendEip712Transaction, sendTransaction } from "viem/zksync";
+import { useWalletClient } from "wagmi";
 
 interface RepostProps {
   isLoading: boolean;
@@ -31,25 +29,26 @@ interface RepostProps {
 const Repost: FC<RepostProps> = ({ isLoading, post, setIsLoading }) => {
   const { currentAccount } = useAccountStore();
   const { isSuspended } = useAccountStatus();
-  const { addTransaction } = useTransactionStore();
+  const { addTransaction, hasOptimisticallyReposted } = useTransactionStore();
   const hasReposted =
-    post.operations?.hasReposted || hasOptimisticallyMirrored(post.id);
+    post.operations?.hasReposted || hasOptimisticallyReposted(post.id);
 
   const [shares, { increment }] = useCounter(
     post.stats.reposts + post.stats.quotes
   );
 
   const { cache } = useApolloClient();
+  const { data: walletClient } = useWalletClient();
 
-  const generateOptimisticMirror = ({
+  const generateOptimisticRepost = ({
     txHash
   }: {
     txHash: string;
   }): OptimisticTransaction => {
     return {
       repostOf: post?.id,
       txHash,
-      type: OptmisticPostType.Mirror
+      type: OptmisticPostType.Repost
     };
   };
 
@@ -68,52 +67,55 @@ const Repost: FC<RepostProps> = ({ isLoading, post, setIsLoading }) => {
     });
   };
 
-  const onError = (error?: any) => {
-    setIsLoading(false);
-    errorToast(error);
-  };
-
-  const onCompleted = (
-    __typename?: "LensProfileManagerRelayError" | "RelayError" | "RelaySuccess"
-  ) => {
-    if (
-      __typename === "RelayError" ||
-      __typename === "LensProfileManagerRelayError"
-    ) {
-      return onError();
-    }
-
+  const onCompleted = (hash: string) => {
     setIsLoading(false);
     increment();
     updateCache();
+    addTransaction(generateOptimisticRepost({ txHash: hash }));
     toast.success("Post has been mirrored!");
-    Leafwatch.track(POST.MIRROR, { postId: post.id });
+    Leafwatch.track(POST.REPOST, { postId: post.id });
   };
 
-  // Onchain mutations
-  const [createRepost] = useRepostMutation({
-    onCompleted: ({ repost }) => {
+  const [repost] = useRepostMutation({
+    onCompleted: async ({ repost }) => {
       if (repost.__typename === "PostResponse") {
-        addTransaction(generateOptimisticMirror({ txHash: repost.hash }));
+        return onCompleted(repost.hash);
+      }
+
+      if (walletClient) {
+        if (repost.__typename === "SponsoredTransactionRequest") {
+          const hash = await sendEip712Transaction(walletClient, {
+            account: walletClient.account,
+            ...sponsoredTransactionData(repost.raw)
+          });
+
+          return onCompleted(hash);
+        }
+
+        if (repost.__typename === "SelfFundedTransactionRequest") {
+          const hash = await sendTransaction(walletClient, {
+            account: walletClient.account,
+            ...selfFundedTransactionData(repost.raw)
+          });
+
+          return onCompleted(hash);
+        }
+      }
+
+      if (repost.__typename === "TransactionWillFail") {
+        return toast.error(repost.reason);
       }
-      onCompleted(repost.__typename);
     },
-    onError
+    onError: (error) => {
+      setIsLoading(false);
+      errorToast(error);
+    }
   });
 
   if (post.operations?.canRepost === TriStateValue.No) {
     return null;
   }
 
-  const repost = async (request: CreateRepostRequest) => {
-    const { data } = await createRepost({ variables: { request } });
-    if (data?.repost.__typename === "TransactionWillFail") {
-      return await createOnchainMirrorTypedData({
-        variables: { request }
-      });
-    }
-  };
-
   const handleCreateRepost = async () => {
     if (!currentAccount) {
       return toast.error(Errors.SignWallet);
@@ -123,14 +125,9 @@ const Repost: FC<RepostProps> = ({ isLoading, post, setIsLoading }) => {
       return toast.error(Errors.Suspended);
     }
 
-    try {
-      setIsLoading(true);
-      const request: CreateRepostRequest = { post: post?.id };
+    setIsLoading(true);
 
-      return await repost(request);
-    } catch (error) {
-      onError(error);
-    }
+    return await repost({ variables: { request: { post: post.id } } });
   };
 
   return (

diff --git a/...ponents/Post/Actions/Share/UndoMirror.tsx → ...ponents/Post/Actions/Share/UndoRepost.tsx b/...ponents/Post/Actions/Share/UndoMirror.tsx → ...ponents/Post/Actions/Share/UndoRepost.tsx
@@ -12,13 +12,13 @@ import type { Dispatch, FC, SetStateAction } from "react";
 import { toast } from "react-hot-toast";
 import { useAccountStore } from "src/store/persisted/useAccountStore";
 
-interface MirrorProps {
+interface UndoRepostProps {
   isLoading: boolean;
   post: AnyPost;
   setIsLoading: Dispatch<SetStateAction<boolean>>;
 }
 
-const UndoMirror: FC<MirrorProps> = ({ isLoading, post, setIsLoading }) => {
+const UndoRepost: FC<UndoRepostProps> = ({ isLoading, post, setIsLoading }) => {
   const { currentAccount } = useAccountStore();
   const { cache } = useApolloClient();
 
@@ -41,8 +41,8 @@ const UndoMirror: FC<MirrorProps> = ({ isLoading, post, setIsLoading }) => {
 
   const [deletePost] = useDeletePostMutation({
     onCompleted: () => {
-      Leafwatch.track(POST.UNDO_MIRROR);
-      toast.success("Undone mirror");
+      Leafwatch.track(POST.UNDO_REPOST);
+      toast.success("Undone repost");
     },
     update: updateCache
   });
@@ -83,4 +83,4 @@ const UndoMirror: FC<MirrorProps> = ({ isLoading, post, setIsLoading }) => {
   );
 };
 
-export default UndoMirror;
+export default UndoRepost;