From 052ba0ac9184b70a5f938fd2f4db1697568499e3 Mon Sep 17 00:00:00 2001
From: yjshi <495054021@qq.com>
Date: Sun, 24 Nov 2024 17:09:57 +0800
Subject: [PATCH 1/3] optimize domain display

---
 .../components/accounts/NicknameDialog.tsx    | 50 ++++++++++++++++---
 1 file changed, 44 insertions(+), 6 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx b/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
index 515d07b7c1652..0ad0dda0e8993 100644
--- a/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
+++ b/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,6 +23,7 @@ import { TextField } from '../../shared/forms/TextField';
 
 const formSchema = z.object({
 	nickname: z.string().trim(),
+	useDomain: z.boolean().optional(),
 });
 
 interface NicknameDialogProps {
@@ -29,30 +31,51 @@ interface NicknameDialogProps {
 	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,
+		setValue,
 		formState: { isSubmitting, isValid },
 	} = form;
 
-	const onSubmit = async ({ nickname }: { nickname: string }) => {
+	const useDomain = watch('useDomain');
+
+	useEffect(() => {
+		if (useDomain) {
+			setValue('nickname', '');
+		} else {
+			setValue('nickname', account?.nickname ?? '');
+		}
+	}, [useDomain, account?.nickname, setValue]);
+
+	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 SUINS domain:
+								<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
@@ -81,11 +119,11 @@ export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 							variant="primary"
 							size="tall"
 							loading={isSubmitting}
-							text={'Save'}
+							text="Save"
 						/>
 					</div>
 				</Form>
 			</DialogContent>
 		</Dialog>
 	);
-}
+}
\ No newline at end of file

From f3588691d6ff0b039115224cb39365e1b28e0ff2 Mon Sep 17 00:00:00 2001
From: yjshi <495054021@qq.com>
Date: Sun, 24 Nov 2024 17:29:06 +0800
Subject: [PATCH 2/3] Adjustment of text

---
 apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx b/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
index 0ad0dda0e8993..f0a0e4ae184ee 100644
--- a/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
@@ -99,7 +99,7 @@ export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 						<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 SUINS domain:
+							Use Sui Name Service:
 								<span className="font-medium text-hero px-2 py-0.5 bg-hero/10 rounded-lg">
 									{domainName}
 								</span>

From 934ba1cbf6c3efdb2711345ccdf3369e53c078d3 Mon Sep 17 00:00:00 2001
From: yjshi <495054021@qq.com>
Date: Sat, 7 Dec 2024 22:36:12 +0800
Subject: [PATCH 3/3] optimize

---
 .../ui/app/components/accounts/NicknameDialog.tsx  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx b/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
index f0a0e4ae184ee..d872578a888cd 100644
--- a/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/NicknameDialog.tsx
@@ -54,20 +54,20 @@ export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 
 	const {
 		register,
-		watch,
-		setValue,
+		watch: watchUseDomain,
+		setValue: setNickname,
 		formState: { isSubmitting, isValid },
 	} = form;
 
-	const useDomain = watch('useDomain');
+	const useDomain = watchUseDomain('useDomain');
 
 	useEffect(() => {
 		if (useDomain) {
-			setValue('nickname', '');
+			setNickname('nickname', '');
 		} else {
-			setValue('nickname', account?.nickname ?? '');
+			setNickname('nickname', account?.nickname ?? '');
 		}
-	}, [useDomain, account?.nickname, setValue]);
+	}, [useDomain, account?.nickname, setNickname]);
 
 	const onSubmit = async ({ nickname, useDomain }: FormValues) => {
 		if (account && accountID) {
@@ -119,7 +119,7 @@ export function NicknameDialog({ accountID, trigger }: NicknameDialogProps) {
 							variant="primary"
 							size="tall"
 							loading={isSubmitting}
-							text="Save"
+							text={'Save'}
 						/>
 					</div>
 				</Form>