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

Summary: Migrated to Lens v3 with enhanced error handling and transaction management. Highlights: • Introduced `onError` function for consistent error handling across components. • Wrapped transaction requests in `try-catch` blocks to manage errors effectively. • Added `sendEip712Transaction` and `sendTransaction` for handling different transaction types. Read more: https://pierre.co/hey/hey/lens-v3
heyxyz · Dec 6, 2024 · 7af768e · 7af768e
1 parent 3d88862
commit 7af768e
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 180 deletions.
diff --git a/apps/web/src/components/Account/Details.tsx b/apps/web/src/components/Account/Details.tsx
@@ -98,7 +98,7 @@ const Details: FC<DetailsProps> = ({ isSuspended = false, account }) => {
             className="text-sm sm:text-base"
             slug={getAccount(account).slugWithPrefix}
           />
-          {account.operations?.isFollowedByMe ? (
+          {account.operations?.isFollowingMe ? (
             <div className="rounded-full bg-gray-200 px-2 py-0.5 text-xs dark:bg-gray-700">
               Follows you
             </div>

diff --git a/apps/web/src/components/Post/Actions/Share/Repost.tsx b/apps/web/src/components/Post/Actions/Share/Repost.tsx
@@ -73,40 +73,46 @@ const Repost: FC<RepostProps> = ({ isLoading, post, setIsLoading }) => {
     toast.success("Post has been mirrored!");
   };
 
+  const onError = (error: any) => {
+    setIsLoading(false);
+    errorToast(error);
+  };
+
   const [repost] = useRepostMutation({
     onCompleted: async ({ repost }) => {
       if (repost.__typename === "PostResponse") {
         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);
+        try {
+          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);
+          }
+        } catch (error) {
+          return onError(error);
         }
       }
 
       if (repost.__typename === "TransactionWillFail") {
         return toast.error(repost.reason);
       }
     },
-    onError: (error) => {
-      setIsLoading(false);
-      errorToast(error);
-    }
+    onError
   });
 
   if (post.operations?.canRepost === TriStateValue.No) {

diff --git a/apps/web/src/components/Settings/Handles/LinkHandle.tsx b/apps/web/src/components/Settings/Handles/LinkHandle.tsx
@@ -47,6 +47,11 @@ const LinkHandle: FC = () => {
     toast.success("Linked");
   };
 
+  const onError = (error: any) => {
+    setLinkingUsername(null);
+    errorToast(error);
+  };
+
   const { data, loading } = useUsernamesQuery({
     variables: { request: { owner: currentAccount?.owner } }
   });
@@ -58,37 +63,39 @@ const LinkHandle: FC = () => {
       }
 
       if (walletClient) {
-        if (
-          assignUsernameToAccount.__typename === "SponsoredTransactionRequest"
-        ) {
-          const hash = await sendEip712Transaction(walletClient, {
-            account: walletClient.account,
-            ...sponsoredTransactionData(assignUsernameToAccount.raw)
-          });
-
-          return onCompleted(hash);
-        }
-
-        if (
-          assignUsernameToAccount.__typename === "SelfFundedTransactionRequest"
-        ) {
-          const hash = await sendTransaction(walletClient, {
-            account: walletClient.account,
-            ...selfFundedTransactionData(assignUsernameToAccount.raw)
-          });
-
-          return onCompleted(hash);
+        try {
+          if (
+            assignUsernameToAccount.__typename === "SponsoredTransactionRequest"
+          ) {
+            const hash = await sendEip712Transaction(walletClient, {
+              account: walletClient.account,
+              ...sponsoredTransactionData(assignUsernameToAccount.raw)
+            });
+
+            return onCompleted(hash);
+          }
+
+          if (
+            assignUsernameToAccount.__typename ===
+            "SelfFundedTransactionRequest"
+          ) {
+            const hash = await sendTransaction(walletClient, {
+              account: walletClient.account,
+              ...selfFundedTransactionData(assignUsernameToAccount.raw)
+            });
+
+            return onCompleted(hash);
+          }
+        } catch (error) {
+          return onError(error);
         }
       }
 
       if (assignUsernameToAccount.__typename === "TransactionWillFail") {
         return toast.error(assignUsernameToAccount.reason);
       }
     },
-    onError: (error) => {
-      setLinkingUsername(null);
-      errorToast(error);
-    }
+    onError
   });
 
   const handleLink = async (username: string) => {

diff --git a/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx b/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx
@@ -39,6 +39,11 @@ const UnlinkHandle: FC = () => {
     toast.success("Unlinked");
   };
 
+  const onError = (error: any) => {
+    setUnlinking(false);
+    errorToast(error);
+  };
+
   const [unassignUsernameFromAccount] = useUnassignUsernameFromAccountMutation({
     onCompleted: async ({ unassignUsernameFromAccount }) => {
       if (
@@ -48,39 +53,40 @@ const UnlinkHandle: FC = () => {
       }
 
       if (walletClient) {
-        if (
-          unassignUsernameFromAccount.__typename ===
-          "SponsoredTransactionRequest"
-        ) {
-          const hash = await sendEip712Transaction(walletClient, {
-            account: walletClient.account,
-            ...sponsoredTransactionData(unassignUsernameFromAccount.raw)
-          });
-
-          return onCompleted(hash);
-        }
+        try {
+          if (
+            unassignUsernameFromAccount.__typename ===
+            "SponsoredTransactionRequest"
+          ) {
+            const hash = await sendEip712Transaction(walletClient, {
+              account: walletClient.account,
+              ...sponsoredTransactionData(unassignUsernameFromAccount.raw)
+            });
+
+            return onCompleted(hash);
+          }
 
-        if (
-          unassignUsernameFromAccount.__typename ===
-          "SelfFundedTransactionRequest"
-        ) {
-          const hash = await sendTransaction(walletClient, {
-            account: walletClient.account,
-            ...selfFundedTransactionData(unassignUsernameFromAccount.raw)
-          });
+          if (
+            unassignUsernameFromAccount.__typename ===
+            "SelfFundedTransactionRequest"
+          ) {
+            const hash = await sendTransaction(walletClient, {
+              account: walletClient.account,
+              ...selfFundedTransactionData(unassignUsernameFromAccount.raw)
+            });
 
-          return onCompleted(hash);
+            return onCompleted(hash);
+          }
+        } catch (error) {
+          return onError(error);
         }
       }
 
       if (unassignUsernameFromAccount.__typename === "TransactionWillFail") {
         return toast.error(unassignUsernameFromAccount.reason);
       }
     },
-    onError: (error) => {
-      setUnlinking(false);
-      errorToast(error);
-    }
+    onError
   });
 
   const handleUnlink = async () => {
@@ -95,7 +101,7 @@ const UnlinkHandle: FC = () => {
     setUnlinking(true);
 
     return await unassignUsernameFromAccount({
-      variables: { request: currentAccount.address }
+      variables: { request: { namespace: currentAccount.username?.namespace } }
     });
   };
 

diff --git a/apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx b/apps/web/src/components/Settings/Manager/LensManager/ToggleLensManager.tsx
@@ -32,36 +32,42 @@ const ToggleLensManager: FC<ToggleLensManagerProps> = ({
     setIsLoading(false);
   };
 
+  const onError = (error: any) => {
+    setIsLoading(false);
+    errorToast(error);
+  };
+
   const [enableSignless] = useEnableSignlessMutation({
     onCompleted: async ({ enableSignless }) => {
       if (walletClient) {
-        if (enableSignless.__typename === "SponsoredTransactionRequest") {
-          const hash = await sendEip712Transaction(walletClient, {
-            account: walletClient.account,
-            ...sponsoredTransactionData(enableSignless.raw)
-          });
+        try {
+          if (enableSignless.__typename === "SponsoredTransactionRequest") {
+            const hash = await sendEip712Transaction(walletClient, {
+              account: walletClient.account,
+              ...sponsoredTransactionData(enableSignless.raw)
+            });
 
-          return onCompleted(hash);
-        }
+            return onCompleted(hash);
+          }
 
-        if (enableSignless.__typename === "SelfFundedTransactionRequest") {
-          const hash = await sendTransaction(walletClient, {
-            account: walletClient.account,
-            ...selfFundedTransactionData(enableSignless.raw)
-          });
+          if (enableSignless.__typename === "SelfFundedTransactionRequest") {
+            const hash = await sendTransaction(walletClient, {
+              account: walletClient.account,
+              ...selfFundedTransactionData(enableSignless.raw)
+            });
 
-          return onCompleted(hash);
+            return onCompleted(hash);
+          }
+        } catch (error) {
+          return onError(error);
         }
       }
 
       if (enableSignless.__typename === "TransactionWillFail") {
         return toast.error(enableSignless.reason);
       }
     },
-    onError: (error) => {
-      setIsLoading(false);
-      errorToast(error);
-    }
+    onError
   });
 
   const handleToggleDispatcher = async () => {

diff --git a/apps/web/src/components/Settings/Profile/Account.tsx b/apps/web/src/components/Settings/Profile/Account.tsx
@@ -16,6 +16,8 @@ import getAccountAttribute from "@hey/helpers/getAccountAttribute";
 import getAvatar from "@hey/helpers/getAvatar";
 import imageKit from "@hey/helpers/imageKit";
 import sanitizeDStorageUrl from "@hey/helpers/sanitizeDStorageUrl";
+import selfFundedTransactionData from "@hey/helpers/selfFundedTransactionData";
+import sponsoredTransactionData from "@hey/helpers/sponsoredTransactionData";
 import trimify from "@hey/helpers/trimify";
 import { getCroppedImg } from "@hey/image-cropper/cropUtils";
 import type { Area } from "@hey/image-cropper/types";
@@ -43,6 +45,8 @@ import { useState } from "react";
 import toast from "react-hot-toast";
 import { useAccountStatus } from "src/store/non-persisted/useAccountStatus";
 import { useAccountStore } from "src/store/persisted/useAccountStore";
+import { sendEip712Transaction, sendTransaction } from "viem/zksync";
+import { useWalletClient } from "wagmi";
 import type { z } from "zod";
 import { object, string, union } from "zod";
 
@@ -97,6 +101,8 @@ const AccountSettingsForm: FC = () => {
     useState("");
   const [uploadingProfilePicture, setUploadingProfilePicture] = useState(false);
 
+  const { data: walletClient } = useWalletClient();
+
   const onCompleted = (hash: string) => {
     setIsLoading(false);
     toast.success(hash);
@@ -109,9 +115,39 @@ const AccountSettingsForm: FC = () => {
   };
 
   const [setAccountMetadata] = useSetAccountMetadataMutation({
-    onCompleted: ({ setAccountMetadata }) => {
+    onCompleted: async ({ setAccountMetadata }) => {
       if (setAccountMetadata.__typename === "SetAccountMetadataResponse") {
-        onCompleted(setAccountMetadata.hash);
+        return onCompleted(setAccountMetadata.hash);
+      }
+
+      if (walletClient) {
+        try {
+          if (setAccountMetadata.__typename === "SponsoredTransactionRequest") {
+            const hash = await sendEip712Transaction(walletClient, {
+              account: walletClient.account,
+              ...sponsoredTransactionData(setAccountMetadata.raw)
+            });
+
+            return onCompleted(hash);
+          }
+
+          if (
+            setAccountMetadata.__typename === "SelfFundedTransactionRequest"
+          ) {
+            const hash = await sendTransaction(walletClient, {
+              account: walletClient.account,
+              ...selfFundedTransactionData(setAccountMetadata.raw)
+            });
+
+            return onCompleted(hash);
+          }
+        } catch (error) {
+          return onError(error);
+        }
+      }
+
+      if (setAccountMetadata.__typename === "TransactionWillFail") {
+        return toast.error(setAccountMetadata.reason);
       }
     },
     onError

diff --git a/apps/web/src/components/Settings/Sessions/List.tsx b/apps/web/src/components/Settings/Sessions/List.tsx
@@ -85,7 +85,13 @@ const List: FC = () => {
   }
 
   if (error) {
-    return <ErrorMessage error={error} title="Failed to load sessions" />;
+    return (
+      <ErrorMessage
+        className="m-5"
+        error={error}
+        title="Failed to load sessions"
+      />
+    );
   }
 
   if (authenticatedSessions?.length === 0) {