feat(start): force lowercase to cel name registration form

apps/spore/src/components/form/CelName.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { useState } from 'react'
 import { toast } from '@/components/ui/sonner'
 import Button from '~/components/Button'
@@ -17,7 +18,12 @@ const celNameSchema = z.object({
     }),
 })
 
-export default function CelNameForm({ balance }: { balance: bigint }) {
+interface CelNameFormProps {
+  balance: bigint
+  forceLowercase?: boolean
+}
+
+const CelNameForm: React.FC<CelNameFormProps> = ({ balance, forceLowercase = false }) => {
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const { mutateAsync } = useRegisterSecondLevelDomain()
   const {
@@ -28,6 +34,13 @@ export default function CelNameForm({ balance }: { balance: bigint }) {
     resolver: zodResolver(celNameSchema),
   })
 
+  const [inputValue, setInputValue] = useState<string>('')
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = forceLowercase ? e.target.value.toLowerCase() : e.target.value
+    setInputValue(value)
+  }
+
   const onSubmit = async (data: any) => {
     setIsLoading(true)
     try {
@@ -47,6 +60,8 @@ export default function CelNameForm({ balance }: { balance: bigint }) {
           placeholder="xxx"
           className="w-full mt-2"
           {...register('domain')}
+          value={inputValue}
+          onChange={handleInputChange}
         />
         <span className="ml-2 pt-8 text-2xl">.cel</span>
       </div>
@@ -66,3 +81,5 @@ export default function CelNameForm({ balance }: { balance: bigint }) {
     </form>
   )
 }
+
+export default CelNameForm

apps/spore/src/routes/start.lazy.tsx

@@ -260,7 +260,7 @@ function RegisterCelName({ balance }: { balance: bigint }) {
       {!isLoadingOwnDomain && mycelName ? (
         <p className="text-right font-title text-3xl font-bold">{mycelName}</p>
       ) : (
-        <CelNameForm balance={balance} />
+        <CelNameForm balance={balance} forceLowercase={true} />
       )}
     </>
   )