frontend: styled keystoreconnectpromp component

Author: shonsirsha

frontends/web/src/components/keystoreconnectprompt.module.css

@@ -0,0 +1,43 @@
+.bitboxContainer {
+    margin-top: calc(var(--space-default) + var(--space-quarter));
+    margin-bottom: calc(var(--space-default) + var(--space-quarter));
+}
+
+.bitboxContainer > div img {
+    width: 198px;
+    height: 115px;
+    margin-right: var(--space-default);
+}
+
+.bitboxContainer > div svg {
+    width: 20px;
+    height: 20px;
+}
+
+
+.bitboxContainer.failed {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+}
+
+.bitboxImage {
+    width: 198px;
+    height: 115px;
+}
+
+.cancelIcon {
+    margin-right: 16px;
+    width: 48px;
+    width: 48px;
+}
+
+.text {
+    font-size: 16px;
+}
+
+@media (max-width: 768px) {
+    .text {
+        font-size: var(--size-default);
+    }
+}

frontends/web/src/components/keystoreconnectprompt.tsx

@@ -18,40 +18,68 @@ import { useTranslation } from 'react-i18next';
 import { Button } from './forms';
 import { cancelConnectKeystore, syncConnectKeystore } from '../api/backend';
 import { useSubscribeReset } from '../hooks/api';
+import { Dialog, DialogButtons } from './dialog/dialog';
+import { BitBox02StylizedDark, BitBox02StylizedLight, Cancel, PointToBitBox02 } from './icon';
+import { useDarkmode } from '../hooks/darkmode';
 import { SkipForTesting } from '../routes/device/components/skipfortesting';
+import styles from './keystoreconnectprompt.module.css';
 
 export function KeystoreConnectPrompt() {
   const { t } = useTranslation();
+  const { isDarkMode } = useDarkmode();
 
   const [data, reset] = useSubscribeReset(syncConnectKeystore());
   if (!data) {
     return null;
   }
   switch (data.typ) {
   case 'connect':
-    // TODO: make this look nice.
     return (
-      <>
-        { data.keystoreName === '' ?
+      <Dialog title={t('welcome.connect')} medium open>
+        <p className={styles.text}>{ data.keystoreName === '' ?
           t('connectKeystore.promptNoName') :
           t('connectKeystore.promptWithName', { name: data.keystoreName })
-        }
-        {/* Software keystore is unlocked from the app, so we add the button here.
-            The BitBox02 unlock is triggered by inserting it using the globally mounted BitBox02Wizard.
-            Te BitBox01 is ignored - BitBox01 users will simply need to unlock before being prompted.
+        }.
+        </p>
+        <div className={styles.bitboxContainer}>
+          {/*
+          Software keystore is unlocked from the app, so we add the SkipForTesting button here (only for development).
+          The BitBox02 unlock is triggered by inserting it using the globally mounted BitBox02Wizard.
+          The BitBox01 is ignored - BitBox01 users will simply need to unlock before being prompted.
           */}
-        <SkipForTesting />
-        <Button primary onClick={() => cancelConnectKeystore()}>{t('dialog.cancel')}</Button>
-      </>
+          <PointToBitBox02 />
+          <SkipForTesting />
+        </div>
+        <DialogButtons>
+          <Button secondary onClick={() => cancelConnectKeystore()}>{t('dialog.cancel')}</Button>
+        </DialogButtons>
+      </Dialog>
     );
   case 'error':
     return (
-      <>
-        { data.errorCode === 'wrongKeystore' ? t('error.wrongKeystore') : data.errorMessage }
-        <Button primary onClick={() => reset()}>{t('button.dismiss')}</Button>
-      </>
+      <Dialog title={t('welcome.connect')} medium open>
+        <p className={styles.text}>
+          {data.errorCode === 'wrongKeystore' ?
+            <>
+              {t('error.wrongKeystore')}
+              <br />
+              <br />
+              {t('error.wrongKeystore2')}
+            </> : data.errorMessage}
+        </p>
+        <div className={`${styles.bitboxContainer} ${styles.failed}`}>
+          <Cancel className={styles.cancelIcon} />
+          {isDarkMode ?
+            <BitBox02StylizedLight className={styles.bitboxImage} /> :
+            <BitBox02StylizedDark className={styles.bitboxImage} />
+          }
+        </div>
+        <DialogButtons>
+          <Button secondary onClick={() => reset()}>{t('dialog.cancel')}</Button>
+        </DialogButtons>
+      </Dialog>
     );
   default:
     return null;
   }
-}
+}

frontends/web/src/locales/en/app.json

@@ -488,8 +488,8 @@
   },
   "confirmOnDevice": "Please confirm on your device.",
   "connectKeystore": {
-    "promptNoName": "Please connect your BitBox02",
-    "promptWithName": "Please connect your BitBox02 named \"{{name}}\""
+    "promptNoName": "Please connect your BitBox02 to continue",
+    "promptWithName": "Please connect your BitBox02 named \"{{name}}\" to continue"
   },
   "darkmode": {
     "toggle": "Dark mode"
@@ -611,7 +611,8 @@
     "aoppUnsupportedFormat": "There are no available accounts that support the requested address format.",
     "aoppUnsupportedKeystore": "The connected device cannot sign messages for this asset.",
     "aoppVersion": "Unknown version.",
-    "wrongKeystore": "Wrong wallet connected - please make sure to insert the correct device matching this account. If you use the optional passphrase, make sure to use the passphrase matching this account."
+    "wrongKeystore": "Wrong wallet connected. Please make sure to insert the correct device matching this account.",
+    "wrongKeystore2": " If you are using the optional passphrase, make sure you have entered the correct passphrase for the account."
   },
   "fiat": {
     "default": "default",
@@ -1551,6 +1552,7 @@
     "sendPairing": "Please pair the BitBox to securely verify transaction details. Go to 'Manage device' in the sidebar."
   },
   "welcome": {
+    "connect": "Connect BitBox02",
     "getStarted": "Let's get started by installing firmware on your BitBox02.",
     "insertBitBox02": "For the BitBox02, please tap the device to continue.",
     "insertDevice": "Please connect your device to get started",