<span> tag is used insetead of <em> and Form.Feedback is added

Author: dmernies-iohk

examples/wallet/app/components/CreateUnlockWalletPassword.js

@@ -77,8 +77,10 @@ export default ({ setValidUnlockWalletPassword }) => {
           className="mt-3"
         />
         <Form.Text>
-          This key allows you to unlock your wallet every time you start it and
-          to keep your account data in a more secure way.
+          <span>
+            This key allows you to unlock your wallet every time you start it
+            and to keep your account data in a more secure way.
+          </span>
         </Form.Text>
         <Form.Control.Feedback type="invalid">
           password and confirmation must be the same.

examples/wallet/app/components/RestoreWalletFromMnemonic.js

@@ -60,18 +60,16 @@ export default ({
             onChange={event => setNewMnemonicPhrase(event.target.value)}
             onBlur={() => checkIsValidMnemonicPhrase()}
           />
-          <Form.Label className="text-danger" hidden={isMnemonicValid}>
-            <em className="text-danger">
-              The phrase can have 12, 15, 18, 21 or 24 valid words.
-            </em>
-          </Form.Label>
+          <Form.Control.Feedback type="invalid">
+            The phrase can have 12, 15, 18, 21 or 24 valid words.
+          </Form.Control.Feedback>
           <Form.Text>
             Example:
             <br />
-            <em className="text-danger">
+            <span>
               decade panther require cruise robust mail gadget advice tonight
               post inner snack
-            </em>
+            </span>
           </Form.Text>
           <Form.Control
             type="password"
@@ -82,10 +80,10 @@ export default ({
             className="mt-3"
           />
           <Form.Text>
-            <em className="text-danger">
+            <span>
               This secret password is part of the BIP39 standard to generate
               safer wallet seeds.
-            </em>
+            </span>
           </Form.Text>
           <CreateUnlockWalletPassword />
         </Form.Group>

examples/wallet/app/components/RestoreWalletFromPrivateKey.js

@@ -23,11 +23,15 @@ export default ({
   const handleSubmit = function handleSubmit(event) {
     event.preventDefault();
     if (isValidUnlockPassword) {
-      setAccount(newPrivateKey, unlockWalletPassword);
+      return setAccount(newPrivateKey, unlockWalletPassword).catch(error => {
+        console.error(error);
+        setPrivateKeyErrorMessage('Invalid private key');
+      });
     }
   };
 
   const [newPrivateKey, setNewPrivateKey] = useState('');
+  const [privateKeyErrorMessage, setPrivateKeyErrorMessage] = useState('');
 
   return (
     <Container>
@@ -39,14 +43,18 @@ export default ({
             type="text"
             name="privateKey"
             value={newPrivateKey}
+            isInvalid={privateKeyErrorMessage}
             onChange={event => setNewPrivateKey(event.target.value)}
           />
+          <Form.Control.Feedback type="invalid">
+            {privateKeyErrorMessage}
+          </Form.Control.Feedback>
           <Form.Text>
             It&apos;s a string like:
             <br />
-            <em className="text-danger">
+            <span>
               ed25519e_sk15psr45hyqnpwcl8xd4lv0m32prenhh8kcltgte2305h5jgynndxect9274j0am0qmmd0snjuadnm6xkgssnkn2njvkg8et8qg0vevsgnwvmpl
-            </em>
+            </span>
           </Form.Text>
           <CreateUnlockWalletPassword />
         </Form.Group>

examples/wallet/app/pages/UnlockWallet.js

@@ -42,9 +42,9 @@ export default ({ setKeysWithUnlockWalletPassword }: Props) => {
             isInvalid={isWrongSpendingPassword}
             onChange={event => setUnlockWalletPassword(event.target.value)}
           />
-          <Form.Label className="text-danger" hidden={!isWrongSpendingPassword}>
-            <code>Incorrect password</code>
-          </Form.Label>
+          <Form.Control.Feedback type="invalid">
+            Incorrect password
+          </Form.Control.Feedback>
         </Form.Group>
         <Row className="justify-content-center">
           <Button variant="primary" type="submit">