fixed: register ui

Outblock · Dec 4, 2024 · 508f1d4 · 508f1d4
1 parent 183d0d1
commit 508f1d4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 deletions.
diff --git 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
@@ -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={