From b70cc5fa7aaa62c12bfe6ddfa65e9cb5dd1017d8 Mon Sep 17 00:00:00 2001
From: Ryan Miller <ryan.m@getsession.org>
Date: Tue, 9 Jul 2024 09:27:08 +1000
Subject: [PATCH] fix: render form error message in the faucet landing page if
 the submit button is not rendered

---
 apps/staking/app/faucet/AuthModule.tsx |  6 +++++-
 packages/ui/components/ui/form.tsx     | 18 ++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/staking/app/faucet/AuthModule.tsx b/apps/staking/app/faucet/AuthModule.tsx
index 030800c7..88d89fcb 100644
--- a/apps/staking/app/faucet/AuthModule.tsx
+++ b/apps/staking/app/faucet/AuthModule.tsx
@@ -19,6 +19,7 @@ import { toast } from '@session/ui/lib/sonner';
 import {
   Form,
   FormControl,
+  FormErrorMessage,
   FormField,
   FormItem,
   FormMessage,
@@ -293,7 +294,10 @@ export const AuthModule = () => {
             >
               {dictionary('submit.getTestTokensText')}
             </FormSubmitButton>
-          ) : null}
+          ) : (
+            /** NOTE: FormSubmitButton contians FormErrorMessage, but we still want to render the error message when the submit button isnt visible */
+            <FormErrorMessage />
+          )}
         </form>
       </Form>
       {formState !== FORM_STATE.LANDING && transactionHash ? (
diff --git a/packages/ui/components/ui/form.tsx b/packages/ui/components/ui/form.tsx
index 18a3df58..fdff815a 100644
--- a/packages/ui/components/ui/form.tsx
+++ b/packages/ui/components/ui/form.tsx
@@ -157,9 +157,22 @@ const FormMessage = React.forwardRef<
 });
 FormMessage.displayName = 'FormMessage';
 
+const FormErrorMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>((props, ref) => {
+  const { errors } = useFormState();
+  return errors.root ? (
+    <FormMessage ref={ref} {...props}>
+      {errors.root.message}
+    </FormMessage>
+  ) : null;
+});
+FormErrorMessage.displayName = 'FormErrorMessage';
+
 const FormSubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, children, ...props }, ref) => {
-    const { isSubmitting, errors, isDirty } = useFormState();
+    const { isSubmitting, isDirty } = useFormState();
     return (
       <>
         <Button
@@ -171,7 +184,7 @@ const FormSubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
         >
           {isSubmitting ? '...' : children}
         </Button>
-        {errors.root ? <FormMessage>{errors.root.message}</FormMessage> : null}
+        <FormErrorMessage />
       </>
     );
   }
@@ -182,6 +195,7 @@ export {
   Form,
   FormControl,
   FormDescription,
+  FormErrorMessage,
   FormField,
   FormItem,
   FormLabel,