From ef88d93bd1407fae6795df1964feba73d986409c Mon Sep 17 00:00:00 2001
From: Yoginth <hey@yoginth.com>
Date: Fri, 6 Dec 2024 10:11:51 +0530
Subject: [PATCH] Migrate to Lens v3

---
 .../Settings/Handles/UnlinkHandle.tsx         | 98 ++++++++++++++-----
 .../OptimisticTransactions/Transaction.tsx    | 30 +++---
 2 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx b/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx
index 792f5e4f21cc..050a2f7ddd48 100644
--- a/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx
+++ b/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx
@@ -1,23 +1,88 @@
-import IndexStatus from "@components/Shared/IndexStatus";
 import errorToast from "@helpers/errorToast";
 import { Errors } from "@hey/data/errors";
+import selfFundedTransactionData from "@hey/helpers/selfFundedTransactionData";
+import sponsoredTransactionData from "@hey/helpers/sponsoredTransactionData";
+import { useUnassignUsernameFromAccountMutation } from "@hey/indexer";
+import { OptmisticPostType } from "@hey/types/enums";
+import type { OptimisticTransaction } from "@hey/types/misc";
 import { Button } from "@hey/ui";
 import type { FC } from "react";
 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 { useTransactionStore } from "src/store/persisted/useTransactionStore";
+import { sendEip712Transaction, sendTransaction } from "viem/zksync";
+import { useWalletClient } from "wagmi";
 
 const UnlinkHandle: FC = () => {
   const { currentAccount } = useAccountStore();
   const { isSuspended } = useAccountStatus();
+  const { addTransaction } = useTransactionStore();
   const [unlinking, setUnlinking] = useState<boolean>(false);
+  const { data: walletClient } = useWalletClient();
 
-  const onError = (error: any) => {
+  const generateOptimisticUnassignUsername = ({
+    txHash
+  }: {
+    txHash: string;
+  }): OptimisticTransaction => {
+    return {
+      txHash,
+      type: OptmisticPostType.UnassignUsername
+    };
+  };
+
+  const onCompleted = (hash: string) => {
     setUnlinking(false);
-    errorToast(error);
+    addTransaction(generateOptimisticUnassignUsername({ txHash: hash }));
+    toast.success("Unlinked");
   };
 
+  const [unassignUsernameFromAccount] = useUnassignUsernameFromAccountMutation({
+    onCompleted: async ({ unassignUsernameFromAccount }) => {
+      if (
+        unassignUsernameFromAccount.__typename === "UnassignUsernameResponse"
+      ) {
+        return onCompleted(unassignUsernameFromAccount.hash);
+      }
+
+      if (walletClient) {
+        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)
+          });
+
+          return onCompleted(hash);
+        }
+      }
+
+      if (unassignUsernameFromAccount.__typename === "TransactionWillFail") {
+        return toast.error(unassignUsernameFromAccount.reason);
+      }
+    },
+    onError: (error) => {
+      setUnlinking(false);
+      errorToast(error);
+    }
+  });
+
   const handleUnlink = async () => {
     if (!currentAccount) {
       return;
@@ -27,28 +92,17 @@ const UnlinkHandle: FC = () => {
       return toast.error(Errors.Suspended);
     }
 
-    try {
-      setUnlinking(true);
-      return await createUnlinkHandleFromProfileTypedData({
-        variables: { request }
-      });
-    } catch (error) {
-      onError(error);
-    }
+    setUnlinking(true);
+
+    return await unassignUsernameFromAccount({
+      variables: { request: currentAccount.address }
+    });
   };
 
   return (
-    <div className="m-5">
-      {writeHash ? (
-        <div className="mt-2">
-          <IndexStatus shouldReload txHash={writeHash} />
-        </div>
-      ) : (
-        <Button disabled={unlinking} onClick={handleUnlink} outline>
-          Un-link handle
-        </Button>
-      )}
-    </div>
+    <Button className="m-5" disabled={unlinking} onClick={handleUnlink} outline>
+      Un-link handle
+    </Button>
   );
 };
 
diff --git a/apps/web/src/components/Shared/Modal/OptimisticTransactions/Transaction.tsx b/apps/web/src/components/Shared/Modal/OptimisticTransactions/Transaction.tsx
index 1a986b02f1bb..c8ab7decf767 100644
--- a/apps/web/src/components/Shared/Modal/OptimisticTransactions/Transaction.tsx
+++ b/apps/web/src/components/Shared/Modal/OptimisticTransactions/Transaction.tsx
@@ -15,29 +15,21 @@ const Transaction: FC<TransactionProps> = ({ transaction }) => {
   return (
     <div className="flex items-center justify-between">
       <Tooltip content={transaction.txHash} placement="top">
-        {transaction.type === OptmisticPostType.Collect ? (
-          <div className="text-sm">
-            {transaction.type} on {transaction.collectOn}
-          </div>
-        ) : transaction.type === OptmisticPostType.Comment ? (
-          <div className="text-sm">
-            {transaction.type} on {transaction.commentOn}
-          </div>
-        ) : transaction.type === OptmisticPostType.Mirror ? (
-          <div className="text-sm">
-            {transaction.type} on {transaction.repostOf}
-          </div>
-        ) : transaction.type === OptmisticPostType.Post ||
-          transaction.type === OptmisticPostType.Quote ? (
+        {transaction.type === OptmisticPostType.Post ||
+        transaction.type === OptmisticPostType.Quote ||
+        transaction.type === OptmisticPostType.AssignUsername ||
+        transaction.type === OptmisticPostType.UnassignUsername ? (
           <div className="text-sm">{transaction.type}</div>
-        ) : transaction.type === OptmisticPostType.Follow ? (
+        ) : transaction.type === OptmisticPostType.Follow ||
+          transaction.type === OptmisticPostType.Unfollow ||
+          transaction.type === OptmisticPostType.Block ||
+          transaction.type === OptmisticPostType.Unblock ||
+          transaction.type === OptmisticPostType.Mirror ||
+          transaction.type === OptmisticPostType.Comment ||
+          transaction.type === OptmisticPostType.Collect ? (
           <div className="text-sm">
             {transaction.type} on {transaction.followOn}
           </div>
-        ) : transaction.type === OptmisticPostType.Unfollow ? (
-          <div className="text-sm">
-            {transaction.type} on {transaction.unfollowOn}
-          </div>
         ) : null}
       </Tooltip>
       <div className="flex items-center space-x-2">