From 8ced272df752bf994659b0adfe9809915457ac3e Mon Sep 17 00:00:00 2001
From: eduramme <eduramme@gmail.com>
Date: Thu, 24 Oct 2024 15:41:49 -0300
Subject: [PATCH 1/3] feat: create basic setPrimaryComponent

---
 components/01-atoms/BlockchainCTA.tsx        |  5 +-
 components/organisms/SetPrimaryNameModal.tsx | 70 ++++++++++++++++++++
 components/organisms/UserDomainCard.tsx      | 21 ++++++
 3 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 components/organisms/SetPrimaryNameModal.tsx

diff --git a/components/01-atoms/BlockchainCTA.tsx b/components/01-atoms/BlockchainCTA.tsx
index f83b606..4371d52 100644
--- a/components/01-atoms/BlockchainCTA.tsx
+++ b/components/01-atoms/BlockchainCTA.tsx
@@ -143,6 +143,7 @@ const OpenWalletCTA = ({ onClick }: BlockchainCTAComponentProps) => {
 
   return (
     <Button
+      className="w-full"
       size="medium"
       onClick={onClick}
       colorStyle="bluePrimary"
@@ -159,7 +160,7 @@ const TransactionRequestConfirmedCTA = ({
 }: BlockchainCTAComponentProps) => {
   const { chain } = useAccount();
   return (
-    <div className="justify flex flex-col space-y-6">
+    <div className="justify flex w-full flex-col space-y-6">
       <Button
         className="pointer-events-none"
         colorStyle="bluePrimary"
@@ -191,7 +192,7 @@ const TransactionRequestSentCTA = ({
   onClick,
 }: BlockchainCTAComponentProps) => {
   return (
-    <div className="group relative">
+    <div className="group relative w-full">
       <div className="absolute left-0 top-0 z-10 group-hover:translate-y-0">
         <Button
           className="pointer-events-none"
diff --git a/components/organisms/SetPrimaryNameModal.tsx b/components/organisms/SetPrimaryNameModal.tsx
new file mode 100644
index 0000000..d50cafd
--- /dev/null
+++ b/components/organisms/SetPrimaryNameModal.tsx
@@ -0,0 +1,70 @@
+import { setPrimaryName } from "@ensdomains/ensjs/wallet";
+
+import { CrossSVG, Modal } from "@ensdomains/thorin";
+import { TransactionReceipt } from "viem";
+
+import { useWalletClient } from "wagmi";
+import { walletWagmiConfig } from "@/lib/wallet/wallet-config";
+import toast from "react-hot-toast";
+import { BlockchainCTA } from "../01-atoms";
+import { TransactionErrorType } from "@/lib/wallet/txError";
+
+interface SetPrimaryNameModalProps {
+  closeModal: () => void;
+  onRecordsEdited?: () => void;
+  onDismiss: () => void;
+  isOpen: boolean;
+  name: string;
+}
+
+export const SetPrimaryNameModal = ({
+  closeModal,
+  onRecordsEdited,
+  onDismiss,
+  isOpen,
+  name,
+}: SetPrimaryNameModalProps) => {
+  const { data: walletClient } = useWalletClient({ config: walletWagmiConfig });
+
+  const handleSetPrimaryName = async (): Promise<
+    `0x${string}` | TransactionErrorType | null
+  > => {
+    if (!walletClient) {
+      toast.error("No wallet client found. Please contact our team.");
+      return null;
+    }
+
+    try {
+      return setPrimaryName(walletClient, {
+        name: name,
+      });
+    } catch (error) {
+      return null;
+    }
+  };
+
+  return (
+    <Modal open={isOpen} onDismiss={onDismiss}>
+      <div className="flex w-[580px] flex-col overflow-hidden rounded-xl border bg-white">
+        <div className="flex items-center justify-between border-b p-4">
+          <h2 className="text-lg font-medium">Set {name} as primary name</h2>
+          <button
+            className="rounded-md p-2 text-gray-500 transition-colors duration-150 hover:bg-gray-100 hover:text-gray-700"
+            onClick={closeModal}
+          >
+            <CrossSVG className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="flex w-full gap-2 p-4">
+          <BlockchainCTA
+            onSuccess={(txReceipt: TransactionReceipt) => {
+              toast.success("Primary name set successfully");
+            }}
+            transactionRequest={handleSetPrimaryName}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/components/organisms/UserDomainCard.tsx b/components/organisms/UserDomainCard.tsx
index e9bfbec..7e7333c 100644
--- a/components/organisms/UserDomainCard.tsx
+++ b/components/organisms/UserDomainCard.tsx
@@ -5,6 +5,7 @@ import { PencilIcon } from "../01-atoms";
 import { EditModalContent } from "./EditModalContent";
 import { useState } from "react";
 import { useAccount, useEnsName } from "wagmi";
+import { SetPrimaryNameModal } from "./SetPrimaryNameModal";
 
 interface UserDomainCardProps {
   url?: string;
@@ -28,6 +29,7 @@ export const UserDomainCard = ({
   owner,
 }: UserDomainCardProps) => {
   const [modalOpen, setModalOpen] = useState(false);
+  const [primaryNameModalOpen, setPrimaryNameModalOpen] = useState(false);
   const { address } = useAccount();
 
   const { data: authedUserName } = useEnsName({
@@ -92,6 +94,15 @@ export const UserDomainCard = ({
         <Skeleton>
           <p className="text-base text-gray-400">{description}</p>
         </Skeleton>
+        <Button
+          size="small"
+          colorStyle="background"
+          onClick={() => {
+            setPrimaryNameModalOpen(true);
+          }}
+        >
+          Set as primary name
+        </Button>
         {/* 
         We don't support primary name setting yet
 
@@ -111,6 +122,16 @@ export const UserDomainCard = ({
           }}
         />
       </Modal>
+      <SetPrimaryNameModal
+        name={name || ""}
+        onDismiss={() => {
+          setPrimaryNameModalOpen(false);
+        }}
+        isOpen={primaryNameModalOpen}
+        closeModal={() => {
+          setPrimaryNameModalOpen(false);
+        }}
+      />
     </div>
   );
 };

From eaf1a33048454e6f218a659e82f54132f41ea968 Mon Sep 17 00:00:00 2001
From: eduramme <eduramme@gmail.com>
Date: Thu, 31 Oct 2024 10:31:16 -0300
Subject: [PATCH 2/3] fix import

---
 components/organisms/SetPrimaryNameModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/organisms/SetPrimaryNameModal.tsx b/components/organisms/SetPrimaryNameModal.tsx
index d50cafd..f4cd714 100644
--- a/components/organisms/SetPrimaryNameModal.tsx
+++ b/components/organisms/SetPrimaryNameModal.tsx
@@ -6,7 +6,7 @@ import { TransactionReceipt } from "viem";
 import { useWalletClient } from "wagmi";
 import { walletWagmiConfig } from "@/lib/wallet/wallet-config";
 import toast from "react-hot-toast";
-import { BlockchainCTA } from "../01-atoms";
+import { BlockchainCTA } from "@/components/atoms";
 import { TransactionErrorType } from "@/lib/wallet/txError";
 
 interface SetPrimaryNameModalProps {

From 6ba0f4cb0026ecb1ccb801663ad873275017e227 Mon Sep 17 00:00:00 2001
From: eduramme <eduramme@gmail.com>
Date: Wed, 20 Nov 2024 17:21:16 -0300
Subject: [PATCH 3/3] feat: call setName

---
 components/organisms/SetPrimaryNameModal.tsx | 35 ++++++++++++++------
 components/organisms/UserDomainCard.tsx      |  3 ++
 pages/domains/[name]/index.tsx               |  1 +
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/components/organisms/SetPrimaryNameModal.tsx b/components/organisms/SetPrimaryNameModal.tsx
index f4cd714..858c9ef 100644
--- a/components/organisms/SetPrimaryNameModal.tsx
+++ b/components/organisms/SetPrimaryNameModal.tsx
@@ -1,28 +1,35 @@
 import { setPrimaryName } from "@ensdomains/ensjs/wallet";
 
 import { CrossSVG, Modal } from "@ensdomains/thorin";
-import { TransactionReceipt } from "viem";
+import {
+  namehash,
+  publicActions,
+  PublicClient,
+  TransactionReceipt,
+} from "viem";
 
-import { useWalletClient } from "wagmi";
+import { usePublicClient, useWalletClient } from "wagmi";
 import { walletWagmiConfig } from "@/lib/wallet/wallet-config";
 import toast from "react-hot-toast";
 import { BlockchainCTA } from "@/components/atoms";
 import { TransactionErrorType } from "@/lib/wallet/txError";
-
+import { ClientWithEns } from "@ensdomains/ensjs/dist/types/contracts/consts";
+import DomainResolverABI from "./../../lib/abi/offchain-resolver.json";
 interface SetPrimaryNameModalProps {
   closeModal: () => void;
   onRecordsEdited?: () => void;
   onDismiss: () => void;
   isOpen: boolean;
   name: string;
+  resolverAddress: string;
 }
 
 export const SetPrimaryNameModal = ({
   closeModal,
-  onRecordsEdited,
   onDismiss,
   isOpen,
   name,
+  resolverAddress,
 }: SetPrimaryNameModalProps) => {
   const { data: walletClient } = useWalletClient({ config: walletWagmiConfig });
 
@@ -34,13 +41,19 @@ export const SetPrimaryNameModal = ({
       return null;
     }
 
-    try {
-      return setPrimaryName(walletClient, {
-        name: name,
-      });
-    } catch (error) {
-      return null;
-    }
+    const client = walletClient.extend(publicActions);
+
+    const { request } = await client.simulateContract({
+      address: resolverAddress as `0x${string}`,
+      account: walletClient.account.address as `0x${string}`,
+      abi: DomainResolverABI,
+      functionName: "setName",
+      args: [namehash(name), name],
+    });
+
+    const setAsPrimaryNameRes = await client.writeContract(request);
+
+    return setAsPrimaryNameRes ? setAsPrimaryNameRes : null;
   };
 
   return (
diff --git a/components/organisms/UserDomainCard.tsx b/components/organisms/UserDomainCard.tsx
index bacca4a..1fd734b 100644
--- a/components/organisms/UserDomainCard.tsx
+++ b/components/organisms/UserDomainCard.tsx
@@ -17,6 +17,7 @@ interface UserDomainCardProps {
   description?: string;
   name?: string;
   owner?: string;
+  resolverAddress?: string;
   onRecordsEdited?: () => void;
 }
 
@@ -27,6 +28,7 @@ export const UserDomainCard = ({
   description,
   onRecordsEdited,
   owner,
+  resolverAddress,
 }: UserDomainCardProps) => {
   const [modalOpen, setModalOpen] = useState(false);
   const [primaryNameModalOpen, setPrimaryNameModalOpen] = useState(false);
@@ -138,6 +140,7 @@ export const UserDomainCard = ({
         />
       </Modal>
       <SetPrimaryNameModal
+        resolverAddress={resolverAddress || ""}
         name={name || ""}
         onDismiss={() => {
           setPrimaryNameModalOpen(false);
diff --git a/pages/domains/[name]/index.tsx b/pages/domains/[name]/index.tsx
index 48f460d..1f2ccaf 100644
--- a/pages/domains/[name]/index.tsx
+++ b/pages/domains/[name]/index.tsx
@@ -112,6 +112,7 @@ export function ManageNamePageContent({ name }: { name: string }) {
             <div className="flex w-full gap-[60px]">
               <Skeleton>
                 <UserDomainCard
+                  resolverAddress={resolver?.address}
                   owner={ensData?.owner}
                   name={name}
                   avatar={textRecords?.avatar}