[Wallet] Fix display inconsistency for domain names when nickname is set

apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { useResolveSuiNSName } from '_app/hooks/useAppResolveSuinsName';
 import {
 	Dialog,
 	DialogContent,
@@ -10,7 +11,7 @@ import {
 	DialogTrigger,
 } from '_src/ui/app/shared/Dialog';
 import { useZodForm } from '@mysten/core';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import { z } from 'zod';
 
@@ -22,37 +23,59 @@ import { TextField } from '../../shared/forms/TextField';
 
 const formSchema = z.object({
 	nickname: z.string().trim(),
+	useDomain: z.boolean().optional(),
 });
 
 interface NicknameDialogProps {
 	accountID: string;
 	trigger: JSX.Element;
 }
 
+type FormValues = {
+	nickname: string;
+	useDomain?: boolean;
+};
+
 export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 	const [open, setOpen] = useState(false);
 	const backgroundClient = useBackgroundClient();
 	const { data: accounts } = useAccounts();
 	const account = accounts?.find((account) => account.id === accountID);
+	const domainName = useResolveSuiNSName(account?.address);
 
 	const form = useZodForm({
 		mode: 'all',
 		schema: formSchema,
 		defaultValues: {
 			nickname: account?.nickname ?? '',
+			useDomain: false,
 		},
 	});
+
 	const {
 		register,
+		watch: watchUseDomain,
+		setValue: setNickname,
 		formState: { isSubmitting, isValid },
 	} = form;
 
-	const onSubmit = async ({ nickname }: { nickname: string }) => {
+	const useDomain = watchUseDomain('useDomain');
+
+	useEffect(() => {
+		if (useDomain) {
+			setNickname('nickname', '');
+		} else {
+			setNickname('nickname', account?.nickname ?? '');
+		}
+	}, [useDomain, account?.nickname, setNickname]);
+
+	const onSubmit = async ({ nickname, useDomain }: FormValues) => {
 		if (account && accountID) {
 			try {
+				const finalNickname = useDomain ? null : nickname;
 				await backgroundClient.setAccountNickname({
 					id: accountID,
-					nickname: nickname || null,
+					nickname: finalNickname,
 				});
 				setOpen(false);
 			} catch (e) {
@@ -72,7 +95,22 @@ export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 					</DialogDescription>
 				</DialogHeader>
 				<Form className="flex flex-col gap-6 h-full" form={form} onSubmit={onSubmit}>
-					<TextField label="Personalize account with a nickname." {...register('nickname')} />
+					{domainName && (
+						<div className="flex items-center gap-2">
+							<input type="checkbox" {...register('useDomain')} id="use-domain" />
+							<label htmlFor="use-domain" className="text-sm flex items-center gap-1">
+							Use Sui Name Service:
+								<span className="font-medium text-hero px-2 py-0.5 bg-hero/10 rounded-lg">
+									{domainName}
+								</span>
+							</label>
+						</div>
+					)}
+					<TextField
+						label="Personalize account with a nickname."
+						{...register('nickname')}
+						disabled={useDomain}
+					/>
 					<div className="flex gap-2.5">
 						<Button variant="outline" size="tall" text="Cancel" onClick={() => setOpen(false)} />
 						<Button
@@ -88,4 +126,4 @@ export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 			</DialogContent>
 		</Dialog>
 	);
-}
+}