diff --git a/nym-wallet/src/components/ConfirmPassword.tsx b/nym-wallet/src/components/ConfirmPassword.tsx
index 610ed0d090..43a82be0f3 100644
--- a/nym-wallet/src/components/ConfirmPassword.tsx
+++ b/nym-wallet/src/components/ConfirmPassword.tsx
@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import { Button, CircularProgress, DialogActions, DialogContent, Typography } from '@mui/material';
+import { useKeyPress } from 'src/hooks/useKeyPress';
import { PasswordInput } from './textfields';
export const ConfirmPassword = ({
@@ -15,6 +16,14 @@ export const ConfirmPassword = ({
}) => {
const [value, setValue] = useState('');
+ const enterKeyPressed = useKeyPress('Enter');
+
+ useEffect(() => {
+ if (enterKeyPressed && !!value.length && !isLoading) {
+ onConfirm(value);
+ }
+ }, [enterKeyPressed]);
+
return (
<>
@@ -27,6 +36,7 @@ export const ConfirmPassword = ({
onUpdatePassword={(pswrd) => setValue(pswrd)}
placeholder="Confirm password"
autoFocus
+ disabled={isLoading}
/>
diff --git a/nym-wallet/src/components/textfields.tsx b/nym-wallet/src/components/textfields.tsx
index c03306d01c..c19d9db638 100644
--- a/nym-wallet/src/components/textfields.tsx
+++ b/nym-wallet/src/components/textfields.tsx
@@ -39,8 +39,9 @@ export const PasswordInput: React.FC<{
label?: string;
placeholder?: string;
autoFocus?: boolean;
+ disabled?: boolean;
onUpdatePassword: (password: string) => void;
-}> = ({ password, label, placeholder, error, autoFocus, onUpdatePassword }) => {
+}> = ({ password, label, placeholder, error, autoFocus, disabled, onUpdatePassword }) => {
const [showPassword, setShowPassword] = useState(false);
return (
@@ -54,6 +55,7 @@ export const PasswordInput: React.FC<{
onChange={(e) => onUpdatePassword(e.target.value)}
type={showPassword ? 'input' : 'password'}
autoFocus={autoFocus}
+ disabled={disabled}
InputProps={{
endAdornment: (
setShowPassword((show) => !show)}>
diff --git a/nym-wallet/src/hooks/useKeyPress.ts b/nym-wallet/src/hooks/useKeyPress.ts
new file mode 100644
index 0000000000..dffaca627a
--- /dev/null
+++ b/nym-wallet/src/hooks/useKeyPress.ts
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+export function useKeyPress(targetKey: string): boolean {
+ // State for keeping track of whether key is pressed
+ const [keyPressed, setKeyPressed] = useState(false);
+ // If pressed key is our target key then set to true
+ function downHandler({ key }: { key: string }): void {
+ if (key === targetKey) {
+ setKeyPressed(true);
+ }
+ }
+ // If released key is our target key then set to false
+ const upHandler = ({ key }: { key: string }): void => {
+ if (key === targetKey) {
+ setKeyPressed(false);
+ }
+ };
+ // Add event listeners
+ useEffect(() => {
+ window.addEventListener('keydown', downHandler);
+ window.addEventListener('keyup', upHandler);
+ // Remove event listeners on cleanup
+ return () => {
+ window.removeEventListener('keydown', downHandler);
+ window.removeEventListener('keyup', upHandler);
+ };
+ }, []); // Empty array ensures that effect is only run on mount and unmount
+ return keyPressed;
+}
diff --git a/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx b/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
index 0555ca1495..e1cb8d2d15 100644
--- a/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
+++ b/nym-wallet/src/pages/auth/pages/signin-mnemonic.tsx
@@ -31,27 +31,24 @@ export const SignInMnemonic = () => {
-
- setMnemonic(mnc)} error={error} />
-
-
-
+
+
);
diff --git a/nym-wallet/src/pages/auth/pages/signin-password.tsx b/nym-wallet/src/pages/auth/pages/signin-password.tsx
index ca441ee7e7..27b6394059 100644
--- a/nym-wallet/src/pages/auth/pages/signin-password.tsx
+++ b/nym-wallet/src/pages/auth/pages/signin-password.tsx
@@ -14,46 +14,48 @@ export const SignInPassword = () => {
-
- setPassword(pswd)}
- error={error}
- autoFocus
- />
-
-
+
+
+
);