diff --git a/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.test.tsx b/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.test.tsx
index 5a7f4f6183..74d0a973b0 100644
--- a/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.test.tsx
+++ b/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.test.tsx
@@ -32,7 +32,9 @@ describe("", () => {
it("requires the password when the secret key is encrypted", async () => {
render(fixture());
- fireEvent.change(screen.getByTestId("secret-key"), { target: { value: "edesk..." } });
+ fireEvent.change(screen.getByTestId("secret-key"), {
+ target: { value: "edesk..." },
+ });
await screen.findByTestId("password");
fireEvent.blur(screen.getByTestId("password"));
@@ -75,9 +77,9 @@ describe("", () => {
await act(() => user.type(screen.getByTestId("password"), password));
}
- expect(screen.getByRole("button")).toBeEnabled();
+ expect(screen.getByTestId("restore-continue-button")).toBeEnabled();
- await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
+ await act(() => user.click(screen.getByTestId("restore-continue-button")));
expect(goToStepMock).toHaveBeenCalledWith({
type: "nameAccount",
@@ -96,9 +98,9 @@ describe("", () => {
await act(() => user.type(screen.getByTestId("password"), "wrong password"));
- expect(screen.getByRole("button")).toBeEnabled();
+ expect(screen.getByTestId("restore-continue-button")).toBeEnabled();
- await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
+ await act(() => user.click(screen.getByTestId("restore-continue-button")));
expect(mockToast).toHaveBeenCalledWith({
description: "Key-password pair is invalid",
@@ -112,9 +114,9 @@ describe("", () => {
await act(() => user.type(screen.getByTestId("secret-key"), UNENCRYPTED_SECRET_KEY + "asdasd"));
- expect(screen.getByRole("button")).toBeEnabled();
+ expect(screen.getByTestId("restore-continue-button")).toBeEnabled();
- await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
+ await act(() => user.click(screen.getByTestId("restore-continue-button")));
expect(mockToast).toHaveBeenCalledWith({
description: "Invalid secret key: checksum doesn't match",
@@ -128,9 +130,9 @@ describe("", () => {
await act(() => user.type(screen.getByTestId("secret-key"), "something invalid"));
- expect(screen.getByRole("button")).toBeEnabled();
+ expect(screen.getByTestId("restore-continue-button")).toBeEnabled();
- await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
+ await act(() => user.click(screen.getByTestId("restore-continue-button")));
expect(mockToast).toHaveBeenCalledWith({
description:
diff --git a/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx b/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx
index d641e54433..88f0dc0ac6 100644
--- a/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx
+++ b/src/components/Onboarding/restoreSecretKey/RestoreSecretKey.tsx
@@ -1,19 +1,13 @@
-import {
- Button,
- FormControl,
- FormErrorMessage,
- FormLabel,
- Input,
- Textarea,
-} from "@chakra-ui/react";
+import { Button, FormControl, FormErrorMessage, FormLabel, Textarea } from "@chakra-ui/react";
import { InMemorySigner } from "@taquito/signer";
import { useState } from "react";
-import { useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
import { KeyIcon } from "../../../assets/icons";
import colors from "../../../style/colors";
import { useAsyncActionHandler } from "../../../utils/hooks/useAsyncActionHandler";
import { isEncryptedSecretKeyPrefix } from "../../../utils/redux/thunks/secretKeyAccount";
+import { PasswordInput } from "../../PasswordInput";
import { ModalContentWrapper } from "../ModalContentWrapper";
import { OnboardingStep } from "../OnboardingStep";
@@ -21,14 +15,16 @@ export const RestoreSecretKey = ({ goToStep }: { goToStep: (step: OnboardingStep
const [isEncrypted, setIsEncrypted] = useState(false);
const { handleAsyncAction } = useAsyncActionHandler();
+ const form = useForm<{ secretKey: string; password: string }>({
+ mode: "onBlur",
+ defaultValues: { password: "" },
+ });
+
const {
register,
handleSubmit,
formState: { errors, isValid },
- } = useForm<{ secretKey: string; password: string }>({
- mode: "onBlur",
- defaultValues: { password: "" },
- });
+ } = form;
const onSubmit = async ({
secretKey: rawSecretKey,
@@ -51,7 +47,7 @@ export const RestoreSecretKey = ({ goToStep }: { goToStep: (step: OnboardingStep
const message = error.message || "";
// if the password doesn't match taquito throws this error
- if (message.includes("Cannot read properties of null (reading 'slice')")) {
+ if (message.includes("Cannot read properties of null")) {
throw new Error("Key-password pair is invalid");
}
@@ -68,44 +64,43 @@ export const RestoreSecretKey = ({ goToStep }: { goToStep: (step: OnboardingStep
icon={}
title="Insert Secret Key"
>
-
+
);
};
diff --git a/src/components/PasswordInput.tsx b/src/components/PasswordInput.tsx
index a3b3c641a9..d780072675 100644
--- a/src/components/PasswordInput.tsx
+++ b/src/components/PasswordInput.tsx
@@ -20,6 +20,7 @@ type PasswordInputProps> = {
label?: string;
placeholder?: string;
required?: string | boolean;
+ minLength?: RegisterOptions["minLength"];
validate?: RegisterOptions["validate"];
} & InputProps;
@@ -29,11 +30,13 @@ export const PasswordInput = >({
label = "Password",
placeholder = "Enter your password",
required = "Password is required",
+ minLength = MIN_LENGTH,
validate,
...rest
}: PasswordInputProps) => {
const { register } = useFormContext();
const [showPassword, setShowPassword] = useState(false);
+
return (
<>
{label}
@@ -45,10 +48,13 @@ export const PasswordInput = >({
type={showPassword ? "text" : "password"}
{...register(inputName, {
required,
- minLength: {
- value: required ? MIN_LENGTH : 0,
- message: `Your password must be at least ${MIN_LENGTH} characters long`,
- },
+ minLength:
+ minLength && required
+ ? {
+ value: minLength,
+ message: `Your password must be at least ${minLength} characters long`,
+ }
+ : undefined,
validate,
})}
{...rest}