From 46d7743111dbb66a12d8c190cd0be5973137cab3 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Mon, 1 Jun 2020 12:55:38 +0200
Subject: [PATCH] Display derive unlock error (#2866)

---
 .../page-accounts/src/Accounts/modals/Derive.tsx   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/modals/Derive.tsx b/packages/page-accounts/src/Accounts/modals/Derive.tsx
index 6fdf1bf0d0..5c5b6b6eed 100644
--- a/packages/page-accounts/src/Accounts/modals/Derive.tsx
+++ b/packages/page-accounts/src/Accounts/modals/Derive.tsx
@@ -27,6 +27,11 @@ interface DeriveAddress {
   deriveError: string | null;
 }
 
+interface LockState {
+  isLocked: boolean;
+  lockedError: string | null;
+}
+
 function deriveValidate (suri: string, pairType: KeypairType): string | null {
   try {
     const { path } = keyExtractPath(suri);
@@ -73,7 +78,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
   const [source] = useState(keyring.getPair(from));
   const [{ address, deriveError }, setDerive] = useState<DeriveAddress>({ address: null, deriveError: null });
   const [isConfirmationOpen, toggleConfirmation] = useToggle();
-  const [isLocked, setIsLocked] = useState(source.isLocked);
+  const [{ isLocked, lockedError }, setIsLocked] = useState<LockState>({ isLocked: source.isLocked, lockedError: null });
   const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
   const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
   const [{ isPass2Valid, password2 }, setPassword2] = useState({ isPass2Valid: false, password2: '' });
@@ -83,7 +88,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
   const isValid = !!address && !deriveError && isNameValid && isPassValid && isPass2Valid;
 
   useEffect((): void => {
-    setIsLocked(source.isLocked);
+    setIsLocked({ isLocked: source.isLocked, lockedError: null });
   }, [source]);
 
   useEffect((): void => {
@@ -120,11 +125,11 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
     (): void => {
       try {
         source.decodePkcs8(rootPass);
+        setIsLocked({ isLocked: source.isLocked, lockedError: null });
       } catch (error) {
         console.error(error);
+        setIsLocked({ isLocked: true, lockedError: (error as Error).message });
       }
-
-      setIsLocked(source.isLocked);
     },
     [rootPass, source]
   );
@@ -173,6 +178,7 @@ function Derive ({ className = '', from, onClose }: Props): React.ReactElement {
             <Password
               autoFocus
               help={t<string>('The password to unlock the selected account.')}
+              isError={!!lockedError}
               label={t<string>('password')}
               onChange={setRootPass}
               value={rootPass}