From ae509695441f7e8913d5c2987ce61ae1c257db23 Mon Sep 17 00:00:00 2001
From: broody <broody@gmail.com>
Date: Thu, 13 Jun 2024 09:47:33 -1000
Subject: [PATCH] Validate username in onClick

---
 packages/keychain/src/components/connect/Signup.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/keychain/src/components/connect/Signup.tsx b/packages/keychain/src/components/connect/Signup.tsx
index e10d3a7d1..0294eca8e 100644
--- a/packages/keychain/src/components/connect/Signup.tsx
+++ b/packages/keychain/src/components/connect/Signup.tsx
@@ -22,7 +22,6 @@ import { isIframe, validateUsernameFor } from "./utils";
 import { RegistrationLink } from "./RegistrationLink";
 import { doSignup } from "hooks/account";
 import { useControllerTheme } from "hooks/theme";
-import { Error as ErrorComp } from "components/Error";
 import { shortString } from "starknet";
 import { useConnection } from "hooks/connection";
 
@@ -141,21 +140,25 @@ function Form({
               autoFocus
               placeholder="Username"
               touched={meta.touched}
-              error={meta.error}
+              error={meta.error || error?.message}
               onClear={() => form.setFieldValue(field.name, "")}
               isLoading={isValidating}
             />
           )}
         </FormikField>
-
-        <ErrorComp error={error} />
       </Content>
 
       <Footer isSlot={isSlot} createSession showTerm>
         <Button
           colorScheme="colorful"
           isLoading={isRegistering}
-          onClick={() => {
+          onClick={async () => {
+            const error = await validateUsernameFor("signup")(values.username);
+            if (error) {
+              setError(new Error(error));
+              return;
+            }
+
             setIsRegistering(true);
 
             const searchParams = new URLSearchParams(window.location.search);