From 508f1d4ff85d7c4b219c5af58d82a17b8a77495f Mon Sep 17 00:00:00 2001
From: zzggo <han0303006@gmail.com>
Date: Wed, 4 Dec 2024 16:15:13 +1100
Subject: [PATCH] fixed: register ui

---
 .../AddWelcome/AddRegister/PickUsername.tsx   | 59 +++++++++++--------
 .../AddWelcome/AddRegister/SetPassword.tsx    |  7 ++-
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx b/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
index 08d7049d..2ec4755c 100644
--- a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
+++ b/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
@@ -105,28 +105,8 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
     [setLoading, setUsernameValid, setHelperText]
   );
 
-  useEffect(() => {
-    setUsernameValid(false);
-    setHelperText(usernameLoading);
-    setLoading(true);
-    const delayDebounceFn = setTimeout(() => {
-      if (username.length < 3) {
-        setErrorMessage(chrome.i18n.getMessage('Too__short'));
-        return;
-      }
-
-      if (username.length > 15) {
-        setErrorMessage(chrome.i18n.getMessage('Too__long'));
-        return;
-      }
-      const regex = /^[A-Za-z0-9]{3,15}$/;
-
-      if (!regex.test(username)) {
-        setErrorMessage(
-          chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
-        );
-        return;
-      }
+  const checkUsername = useCallback(
+    (username) => {
       wallet.openapi
         .checkUsername(username.toLowerCase())
         .then((response) => {
@@ -148,13 +128,44 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
             }
           }
         })
-        .catch((error) => {
+        .catch(() => {
           setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error'));
         });
+    },
+    [setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi]
+  );
+
+  useEffect(() => {
+    setUsernameValid(false);
+    setHelperText(usernameLoading);
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      if (username.length < 3) {
+        setErrorMessage(chrome.i18n.getMessage('Too__short'));
+        setLoading(false);
+        return;
+      }
+
+      if (username.length > 15) {
+        setErrorMessage(chrome.i18n.getMessage('Too__long'));
+        setLoading(false);
+        return;
+      }
+
+      const regex = /^[A-Za-z0-9]{3,15}$/;
+      if (!regex.test(username)) {
+        setErrorMessage(
+          chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
+        );
+        setLoading(false);
+        return;
+      }
+
+      checkUsername(username);
     }, 500);
 
     return () => clearTimeout(delayDebounceFn);
-  }, [setErrorMessage, username, usernameCorrect, wallet.openapi]);
+  }, [username]);
 
   const msgBgColor = () => {
     if (isLoading) {
diff --git a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
index fa9ab332..5be6a3d2 100644
--- a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
+++ b/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
@@ -67,8 +67,10 @@ const BpIcon = styled('span')(() => ({
   borderRadius: 8,
   width: 24,
   height: 24,
+  display: 'block',
   border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
+  backgroundColor: '#ffffff',
+  opacity: 1,
 }));
 
 const BpCheckedIcon = styled(BpIcon)({
@@ -295,6 +297,9 @@ const SetPassword = ({ handleClick, mnemonic, username, setExPassword, tempPassw
               icon={<BpIcon />}
               checkedIcon={<BpCheckedIcon />}
               onChange={(event) => setCheck(event.target.checked)}
+              sx={{
+                backgroundColor: '#fff',
+              }}
             />
           }
           label={