Add enter listener

src/components/HealthChecks/HealthChecks.tsx

@@ -1,5 +1,5 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useEffect, useState, KeyboardEvent } from "react";
 import { useDebug } from "../../hooks/useDebug";
 import { usePersistence } from "../../hooks/usePersistence";
 import { usePortForwarding } from "../../hooks/usePortForwarding";
@@ -85,6 +85,12 @@ export function HealthChecks({ online, onStepValid }: Props) {
       .then(() => codex.refetch());
   };
 
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onSave();
+    }
+  };
+
   return (
     <div className="health-checks">
       <div
@@ -101,6 +107,7 @@ export function HealthChecks({ online, onStepValid }: Props) {
             isInvalid={isAddressInvalid}
             onChange={onAddressChange}
             value={address}
+            onKeyDown={onKeyDown}
             placeholder="127.0.0.1"></Input>
           {isAddressInvalid ? (
             <ErrorCircleIcon width={16} />
@@ -116,6 +123,7 @@ export function HealthChecks({ online, onStepValid }: Props) {
             type="number"
             onChange={onPortChange}
             value={port}
+            onKeyDown={onKeyDown}
             isInvalid={isPortInvalid}
             placeholder="8080"></Input>
           <SuccessCircleIcon width={20}></SuccessCircleIcon>

src/components/UserInfo/UserInfo.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useState, KeyboardEvent } from "react";
 import "./UserInfo.css";
 import { Input } from "@codex-storage/marketplace-ui-components";
 import EmojiPicker, {
@@ -10,9 +10,10 @@ import { WebStorage } from "../../utils/web-storage";
 
 type Props = {
   onNameChange?: (value: string) => void;
+  onEnterPressed: () => void;
 };
 
-export function UserInfo({ onNameChange }: Props) {
+export function UserInfo({ onNameChange, onEnterPressed }: Props) {
   const [displayName, setDisplayName] = useState(
     WebStorage.onBoarding.getDisplayName()
   );
@@ -34,6 +35,12 @@ export function UserInfo({ onNameChange }: Props) {
     setAreEmojiVisible(false);
   };
 
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      onEnterPressed();
+    }
+  };
+
   return (
     <div className="user-info">
       <div className="emoji">
@@ -77,6 +84,7 @@ export function UserInfo({ onNameChange }: Props) {
           label="Preferred name"
           id="displayName"
           autoComplete="off"
+          onKeyDown={onKeyDown}
           value={displayName}></Input>
       </div>
     </div>

src/routes/onboarding-name.tsx

@@ -36,7 +36,7 @@ export const OnBoardingNameRoute = () => {
             What do you want to be called?
           </h1>
 
-          <UserInfo onNameChange={onNameChange} />
+          <UserInfo onNameChange={onNameChange} onEnterPressed={onNextStep} />
         </section>
 
         <a