Migrate to Lens v3

heyxyz · Dec 6, 2024 · 4d8c8fc · 4d8c8fc
1 parent 359fea8
commit 4d8c8fc
Show file tree

Hide file tree

Showing 9 changed files with 264 additions and 108 deletions.
diff --git a/apps/web/src/components/Settings/Handles/LinkHandle.tsx b/apps/web/src/components/Settings/Handles/LinkHandle.tsx
@@ -1,32 +1,97 @@
-import IndexStatus from "@components/Shared/IndexStatus";
 import LazySmallSingleAccount from "@components/Shared/LazySmallSingleAccount";
 import Loader from "@components/Shared/Loader";
 import Slug from "@components/Shared/Slug";
 import errorToast from "@helpers/errorToast";
 import { AtSymbolIcon } from "@heroicons/react/24/outline";
 import { Errors } from "@hey/data/errors";
+import selfFundedTransactionData from "@hey/helpers/selfFundedTransactionData";
+import sponsoredTransactionData from "@hey/helpers/sponsoredTransactionData";
+import {
+  useAssignUsernameToAccountMutation,
+  useUsernamesQuery
+} from "@hey/indexer";
+import { OptmisticPostType } from "@hey/types/enums";
+import type { OptimisticTransaction } from "@hey/types/misc";
 import { Button, EmptyState } 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 LinkHandle: FC = () => {
   const { currentAccount } = useAccountStore();
   const { isSuspended } = useAccountStatus();
-  const [linkingHandle, setLinkingHandle] = useState<null | string>(null);
+  const { addTransaction } = useTransactionStore();
 
-  const onError = (error: any) => {
-    setLinkingHandle(null);
-    errorToast(error);
+  const [linkingUsername, setLinkingUsername] = useState<null | string>(null);
+  const { data: walletClient } = useWalletClient();
+
+  const generateOptimisticAssignUsername = ({
+    txHash
+  }: {
+    txHash: string;
+  }): OptimisticTransaction => {
+    return {
+      txHash,
+      type: OptmisticPostType.AssignUsername
+    };
+  };
+
+  const onCompleted = (hash: string) => {
+    setLinkingUsername(null);
+    addTransaction(generateOptimisticAssignUsername({ txHash: hash }));
+    toast.success("Linked");
   };
 
-  const { data, loading } = useOwnedHandlesQuery({
-    variables: { request: { for: currentAccount?.owner } }
+  const { data, loading } = useUsernamesQuery({
+    variables: { request: { owner: currentAccount?.owner } }
+  });
+
+  const [assignUsernameToAccount] = useAssignUsernameToAccountMutation({
+    onCompleted: async ({ assignUsernameToAccount }) => {
+      if (assignUsernameToAccount.__typename === "AssignUsernameResponse") {
+        return onCompleted(assignUsernameToAccount.hash);
+      }
+
+      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);
+        }
+      }
+
+      if (assignUsernameToAccount.__typename === "TransactionWillFail") {
+        return toast.error(assignUsernameToAccount.reason);
+      }
+    },
+    onError: (error) => {
+      setLinkingUsername(null);
+      errorToast(error);
+    }
   });
 
-  const handleLink = async (handle: string) => {
+  const handleLink = async (username: string) => {
     if (!currentAccount) {
       return;
     }
@@ -41,66 +106,55 @@ const LinkHandle: FC = () => {
       return;
     }
 
-    try {
-      setLinkingHandle(handle);
-      const request: LinkHandleToProfileRequest = { handle };
+    setLinkingUsername(username);
 
-      return await createLinkHandleToProfileTypedData({
-        variables: { request }
-      });
-    } catch (error) {
-      onError(error);
-    }
+    return await assignUsernameToAccount({
+      variables: { request: { username: { localName: username } } }
+    });
   };
 
   if (loading) {
     return <Loader className="py-10" />;
   }
 
-  const ownedHandles = data?.ownedHandles.items.filter(
-    (handle) => handle.linkedTo?.nftTokenId !== currentAccount?.address
+  const availableUsernames = data?.usernames.items.filter(
+    (handle) => handle.linkedTo !== currentAccount?.address
   );
 
-  if (!ownedHandles?.length) {
+  if (!availableUsernames?.length) {
     return (
       <EmptyState
         hideCard
         icon={<AtSymbolIcon className="size-8" />}
-        message="No handles found to link!"
+        message="No usernames found to link!"
       />
     );
   }
 
   return (
     <div className="m-5 space-y-6">
-      {ownedHandles?.map((handle) => (
+      {availableUsernames?.map((username) => (
         <div
           className="flex flex-wrap items-center justify-between gap-3"
-          key={handle.fullHandle}
+          key={username.value}
         >
           <div className="flex items-center space-x-2">
-            <Slug className="font-bold" slug={handle.fullHandle} />
-            {handle.linkedTo ? (
+            <Slug className="font-bold" slug={username.value} />
+            {username.linkedTo ? (
               <div className="flex items-center space-x-2">
                 <span>·</span>
                 <div>Linked to</div>
-                <LazySmallSingleAccount address={handle.linkedTo?.nftTokenId} />
+                <LazySmallSingleAccount address={username.linkedTo} />
               </div>
             ) : null}
           </div>
-          {writeHash ? (
-            <div className="mt-2">
-              <IndexStatus shouldReload txHash={writeHash} />
-            </div>
-          ) : (
-            <Button
-              disabled={linkingHandle === handle.fullHandle}
-              onClick={() => handleLink(handle.fullHandle)}
-              outline
-            >
-              {handle.linkedTo ? "Unlink and Link" : "Link"}
-            </Button>
-          )}
+          <Button
+            disabled={linkingUsername === username.value}
+            onClick={() => handleLink(username.value)}
+            outline
+          >
+            {username.linkedTo ? "Unlink and Link" : "Link"}
+          </Button>
         </div>
       ))}
     </div>

diff --git a/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx b/apps/web/src/components/Settings/Handles/UnlinkHandle.tsx
@@ -29,10 +29,6 @@ const UnlinkHandle: FC = () => {
 
     try {
       setUnlinking(true);
-      const request: UnlinkHandleFromProfileRequest = {
-        handle: currentAccount.username?.localName
-      };
-
       return await createUnlinkHandleFromProfileTypedData({
         variables: { request }
       });

diff --git a/apps/web/src/components/Shared/Account/Follow.tsx b/apps/web/src/components/Shared/Account/Follow.tsx
@@ -73,11 +73,6 @@ const Follow: FC<FollowProps> = ({
     });
   };
 
-  const onError = (error: any) => {
-    setIsLoading(false);
-    errorToast(error);
-  };
-
   const [follow] = useFollowMutation({
     onCompleted: async ({ follow }) => {
       if (follow.__typename === "FollowResponse") {
@@ -108,7 +103,10 @@ const Follow: FC<FollowProps> = ({
         return toast.error(follow.reason);
       }
     },
-    onError
+    onError: (error) => {
+      setIsLoading(false);
+      errorToast(error);
+    }
   });
 
   const handleCreateFollow = async () => {
@@ -121,14 +119,10 @@ const Follow: FC<FollowProps> = ({
       return toast.error(Errors.Suspended);
     }
 
-    try {
-      setIsLoading(true);
-      return await follow({
-        variables: { request: { account: account.address } }
-      });
-    } catch (error) {
-      onError(error);
-    }
+    setIsLoading(true);
+    return await follow({
+      variables: { request: { account: account.address } }
+    });
   };
 
   return (

diff --git a/apps/web/src/components/Shared/Account/Unfollow.tsx b/apps/web/src/components/Shared/Account/Unfollow.tsx
@@ -73,11 +73,6 @@ const Unfollow: FC<UnfollowProps> = ({
     });
   };
 
-  const onError = (error: any) => {
-    setIsLoading(false);
-    errorToast(error);
-  };
-
   const [unfollow] = useUnfollowMutation({
     onCompleted: async ({ unfollow }) => {
       if (unfollow.__typename === "UnfollowResponse") {
@@ -108,7 +103,10 @@ const Unfollow: FC<UnfollowProps> = ({
         return toast.error(unfollow.reason);
       }
     },
-    onError
+    onError: (error) => {
+      setIsLoading(false);
+      errorToast(error);
+    }
   });
 
   const handleCreateUnfollow = async () => {
@@ -121,14 +119,10 @@ const Unfollow: FC<UnfollowProps> = ({
       return toast.error(Errors.Suspended);
     }
 
-    try {
-      setIsLoading(true);
-      return await unfollow({
-        variables: { request: { account: account.address } }
-      });
-    } catch (error) {
-      onError(error);
-    }
+    setIsLoading(true);
+    return await unfollow({
+      variables: { request: { account: account.address } }
+    });
   };
 
   return (

diff --git a/packages/indexer/documents/fragments/account/UsernameFields.graphql b/packages/indexer/documents/fragments/account/UsernameFields.graphql
@@ -2,4 +2,5 @@ fragment UsernameFields on Username {
   localName
   linkedTo
   ownedBy
+  value
 }
diff --git a/packages/indexer/documents/mutations/account/UnassignUsernameFromAccount.graphql b/packages/indexer/documents/mutations/account/UnassignUsernameFromAccount.graphql
@@ -0,0 +1,18 @@
+mutation UnassignUsernameFromAccount(
+  $request: UnassignUsernameFromAccountRequest!
+) {
+  unassignUsernameFromAccount(request: $request) {
+    ... on UnassignUsernameResponse {
+      hash
+    }
+    ... on SelfFundedTransactionRequest {
+      ...SelfFundedTransactionRequestFields
+    }
+    ... on SponsoredTransactionRequest {
+      ...SponsoredTransactionRequestFields
+    }
+    ... on TransactionWillFail {
+      reason
+    }
+  }
+}
diff --git a/packages/indexer/documents/queries/account/Usernames.graphql b/packages/indexer/documents/queries/account/Usernames.graphql
@@ -0,0 +1,10 @@
+query Usernames($request: UsernamesRequest!) {
+  usernames(request: $request) {
+    items {
+      ...UsernameFields
+    }
+    pageInfo {
+      ...PaginatedResultInfoFields
+    }
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ fragment UsernameFields on Username { @@
       localName
       linkedTo
       ownedBy
+      value
     }