make sure lightning address is lowercase

src/components/layout/TextField.tsx

@@ -14,6 +14,7 @@ export type TextFieldProps = {
     required?: boolean;
     multiline?: boolean;
     disabled?: boolean;
+    autoCapitalize?: string;
     ref: (element: HTMLInputElement | HTMLTextAreaElement) => void;
     onInput: JSX.EventHandler<
         HTMLInputElement | HTMLTextAreaElement,
@@ -32,7 +33,8 @@ export function TextField(props: TextFieldProps) {
         "ref",
         "onInput",
         "onChange",
-        "onBlur"
+        "onBlur",
+        "autoCapitalize"
     ]);
     return (
         <KTextField.Root
@@ -51,6 +53,7 @@ export function TextField(props: TextFieldProps) {
             <Show
                 when={props.multiline}
                 fallback={
+                    // @ts-expect-error autocapitalize isn't in the props for some reason
                     <KTextField.Input
                         {...fieldProps}
                         type={props.type}
@@ -58,11 +61,14 @@ export function TextField(props: TextFieldProps) {
                     />
                 }
             >
-                <KTextField.TextArea
-                    {...fieldProps}
-                    autoResize
-                    class="w-full rounded-lg bg-white/10 p-2 placeholder-neutral-400"
-                />
+                {
+                    // @ts-expect-error autocapitalize isn't in the props for some reason
+                    <KTextField.TextArea
+                        {...fieldProps}
+                        autoResize
+                        class="w-full rounded-lg bg-white/10 p-2 placeholder-neutral-400"
+                    />
+                }
             </Show>
             <KTextField.ErrorMessage class="text-sm text-m-red">
                 {props.error}

src/routes/Feedback.tsx

@@ -8,6 +8,7 @@ import {
     BackPop,
     Button,
     ButtonLink,
+    DefaultMain,
     LargeHeader,
     NiceP,
     TextField,
@@ -172,7 +173,7 @@ export function Feedback() {
     const setupError = state?.setupError || undefined;
 
     return (
-        <VStack>
+        <DefaultMain>
             <BackPop default="/" />
             <Switch>
                 <Match when={submitted()}>
@@ -209,6 +210,6 @@ export function Feedback() {
             <Show when={!setupError}>
                 <NavBar activeTab="send" />
             </Show>
-        </VStack>
+        </DefaultMain>
     );
 }

src/routes/settings/LightningAddress.tsx

@@ -1,6 +1,7 @@
 import { Capacitor } from "@capacitor/core";
 import {
     createForm,
+    custom,
     required,
     reset,
     SubmitHandler
@@ -40,6 +41,12 @@ type HermesForm = {
     name: string;
 };
 
+const validateLowerCase = (value?: string) => {
+    if (!value) return false;
+    const valid = /^[a-z0-9-_.]+$/;
+    return valid.test(value);
+};
+
 // todo(paul) put this somewhere else
 function HermesForm(props: { onSubmit: (name: string) => void }) {
     const [state, _] = useMegaStore();
@@ -62,7 +69,7 @@ function HermesForm(props: { onSubmit: (name: string) => void }) {
         setSuccess("");
         setError(undefined);
         try {
-            const name = f.name.trim();
+            const name = f.name.trim().toLowerCase();
             const available =
                 await state.mutiny_wallet?.check_available_lnurl_name(name);
             if (!available) {
@@ -91,19 +98,26 @@ function HermesForm(props: { onSubmit: (name: string) => void }) {
     return (
         <Form onSubmit={handleSubmit}>
             <VStack>
-                <Field name="name" validate={[required("Must not be empty")]}>
+                <Field
+                    name="name"
+                    validate={[
+                        required("Must not be empty"),
+                        custom(validateLowerCase, "Address must be lowercase")
+                    ]}
+                >
                     {(field, props) => (
                         <div class="flex w-full flex-1 gap-2">
                             <div class="flex-1">
                                 <TextField
                                     {...props}
                                     {...field}
+                                    autoCapitalize="none"
                                     error={field.error}
                                     label={"Nym"}
                                     required
                                 />
                             </div>
-                            <div class="flex-0 self-end pb-2 text-2xl text-m-grey-350">
+                            <div class="flex-0 self-start pt-8 text-2xl text-m-grey-350">
                                 @{hermesDomain}
                             </div>
                         </div>