frontend/add-account: ask user to connect BitBox02 to continue

Since watchonly, one can enter this screen without a keystore
connected. If so, we ask the user to connect to proceed.

Author: benma

frontends/web/src/api/backend.ts

@@ -17,7 +17,7 @@
 import { AccountCode, CoinCode } from './account';
 import { apiGet, apiPost } from '../utils/request';
 import { FailResponse, SuccessResponse } from './response';
-import { TSubscriptionCallback, subscribeEndpoint } from './subscribe';
+import { TSubscriptionCallback, TUnsubscribe, subscribeEndpoint } from './subscribe';
 
 export interface ICoin {
     coinCode: CoinCode;
@@ -125,3 +125,15 @@ export const subscribeAuth = (
 ) => (
   subscribeEndpoint('auth', cb)
 );
+
+/**
+ * Returns a function that subscribes a callback on "keystores". It is called whenever a keystore
+ * is connected or disconnected.
+ */
+export const syncKeystores = (
+  cb: () => void
+): TUnsubscribe => {
+  return subscribeEndpoint('keystores', () => {
+    cb();
+  });
+};

frontends/web/src/routes/account/add/add.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as backendAPI from '../../../api/backend';
 import { SimpleMarkup } from '../../../utils/markup';
@@ -45,10 +45,6 @@ export const AddAccount = () => {
 
   const { t } = useTranslation();
 
-  useEffect(() => {
-    startProcess();
-  }, []);
-
   useEffect(() => {
     if (step === 'choose-name') {
       inputRef.current?.focus();
@@ -59,7 +55,7 @@ export const AddAccount = () => {
     return supportedCoins.length === 1;
   };
 
-  const startProcess = async () => {
+  const startProcess = useCallback(async () => {
     try {
       const coins = await backendAPI.getSupportedCoins();
       const onlyOneCoinIsSupported = (coins.length === 1);
@@ -73,7 +69,16 @@ export const AddAccount = () => {
     } catch (err) {
       console.error(err);
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    startProcess();
+
+    const unsubscribe = backendAPI.syncKeystores(() => {
+      startProcess();
+    });
+    return unsubscribe;
+  }, [startProcess]);
 
   const back = () => {
     switch (step) {
@@ -122,6 +127,13 @@ export const AddAccount = () => {
   const renderContent = () => {
     switch (step) {
     case 'select-coin':
+      if (supportedCoins.length === 0) {
+        return (
+          <div className="text-center">
+            {t('connectKeystore.promptNoName')}
+          </div>
+        );
+      }
       return (
         <CoinDropDown
           onChange={coin => {