fix: render form error message in the faucet landing page if the subm…

…it button is not rendered
oxen-io · Jul 8, 2024 · b70cc5f · b70cc5f
1 parent e530e76
commit b70cc5f
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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,