fix(web): bridge onChangeText->onChange in gui-stub Input so onboarding accepts input

The auth screens (ImportMnemonic/SetPIN/Unlock/ConfirmMnemonic) speak the
Tamagui/RN text-input contract (onChangeText, secureTextEntry, multiline,
onSubmitEditing) - the same contract @luxfi/ui@7.4.0's bridged Input honors.
The local @hanzo/gui stub spread these raw onto a native <input>, so a
value + onChangeText field was controlled with no working handler and
silently dropped every keystroke (dead seed-phrase / PIN entry). Translate
the contract to native web events in the stub.

Verified 390x844: import-phrase textarea + PIN + unlock accept keystrokes,
create/import persists, unlock reaches /portfolio, quick-actions soft-nav
without session drop.

Co-authored-by: Hanzo Dev <dev@hanzo.ai>
This commit is contained in:
zeekay
2026-07-18 10:50:45 -07:00
co-authored by Hanzo Dev
parent 1ddc0df258
commit 5754513482
+55 -10
View File
@@ -124,20 +124,65 @@ export const Button: React.FC<any> = ({ children, onPress, onClick, ...props })
)
}
export const Input: React.FC<any> = ({ ...props }) => {
/**
* Text input. The auth screens speak the Tamagui / React-Native input contract
* (`onChangeText`, `secureTextEntry`, `multiline`, `onSubmitEditing`) — the same
* contract @luxfi/ui's bridged Input honors. Translate it to native web events
* here: without the `onChangeText -> onChange` bridge, a `value` + `onChangeText`
* field is controlled with no working handler, so it renders but silently drops
* every keystroke (dead seed-phrase / PIN entry).
*/
export const Input: React.FC<any> = ({
onChangeText,
onChange,
onSubmitEditing,
secureTextEntry,
multiline,
numberOfLines,
type,
...props
}) => {
const { style, rest } = pickStyle(props)
const handleChange = (e: any) => {
onChange?.(e)
onChangeText?.(e.target.value)
}
const boxStyle: CSSish = {
background: "var(--surface3, #ebebeb)",
color: "var(--neutral1, #000)",
padding: "8px 12px",
borderRadius: "6px",
border: "1px solid var(--surface3, #ebebeb)",
fontSize: "14px",
fontFamily: "inherit",
...style,
}
if (multiline) {
return (
<textarea
{...rest}
rows={numberOfLines ?? 4}
onChange={handleChange}
style={{ ...boxStyle, resize: "vertical" }}
/>
)
}
return (
<input
{...rest}
style={{
background: "var(--surface3, #ebebeb)",
color: "var(--neutral1, #000)",
padding: "8px 12px",
borderRadius: "6px",
border: "1px solid var(--surface3, #ebebeb)",
fontSize: "14px",
...style,
}}
type={secureTextEntry ? "password" : type ?? "text"}
onChange={handleChange}
onKeyDown={
onSubmitEditing
? (e: any) => {
if (e.key === "Enter") {
e.preventDefault()
onSubmitEditing(e)
}
}
: undefined
}
style={boxStyle}
/>
)
}