230 feat enable primary name setting

components/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"

components/organisms/SetPrimaryNameModal.tsx

@@ -0,0 +1,83 @@
+import { setPrimaryName } from "@ensdomains/ensjs/wallet";
+
+import { CrossSVG, Modal } from "@ensdomains/thorin";
+import {
+  namehash,
+  publicActions,
+  PublicClient,
+  TransactionReceipt,
+} from "viem";
+
+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,
+  onDismiss,
+  isOpen,
+  name,
+  resolverAddress,
+}: 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;
+    }
+
+    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 (
+    <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>
+  );
+};

components/organisms/UserDomainCard.tsx

@@ -5,6 +5,7 @@ import { PencilIcon } from "../atoms";
 import { EditModalContent } from "./EditModalContent";
 import { useState, useEffect } from "react";
 import { useAccount, useEnsName } from "wagmi";
+import { SetPrimaryNameModal } from "./SetPrimaryNameModal";
 
 interface UserDomainCardProps {
   url?: string;
@@ -16,6 +17,7 @@ interface UserDomainCardProps {
   description?: string;
   name?: string;
   owner?: string;
+  resolverAddress?: string;
   onRecordsEdited?: () => void;
 }
 
@@ -26,8 +28,10 @@ export const UserDomainCard = ({
   description,
   onRecordsEdited,
   owner,
+  resolverAddress,
 }: UserDomainCardProps) => {
   const [modalOpen, setModalOpen] = useState(false);
+  const [primaryNameModalOpen, setPrimaryNameModalOpen] = useState(false);
   const [isClient, setIsClient] = useState(false);
   const { address } = useAccount();
 
@@ -107,6 +111,25 @@ 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
+
+        <Skeleton>
+        <div className="flex items-center justify-center gap-2 p-3 rounded-md border border-gray-200">
+          <Toggle />
+          <p>Primary name</p>
+          <InfoCircleSVG className="text-gray-400 h-4 w-4 mr-1" />
+        </div>
+      </Skeleton> */}
       </div>
       <Modal open={modalOpen} onDismiss={() => setModalOpen(false)}>
         <EditModalContent
@@ -116,6 +139,17 @@ export const UserDomainCard = ({
           }}
         />
       </Modal>
+      <SetPrimaryNameModal
+        resolverAddress={resolverAddress || ""}
+        name={name || ""}
+        onDismiss={() => {
+          setPrimaryNameModalOpen(false);
+        }}
+        isOpen={primaryNameModalOpen}
+        closeModal={() => {
+          setPrimaryNameModalOpen(false);
+        }}
+      />
     </div>
   );
 };

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}