frontend: add prompt to connect keystore

Author: benma

backend/accounts.go

@@ -553,11 +553,64 @@ func (backend *Backend) createAndAddAccount(coin coinpkg.Coin, persistedConfig *
 		DBFolder:    backend.arguments.CacheDirectoryPath(),
 		NotesFolder: backend.arguments.NotesDirectoryPath(),
 		ConnectKeystore: func() (keystore.Keystore, error) {
+			type data struct {
+				Type         string `json:"typ"`
+				KeystoreName string `json:"keystoreName"`
+				ErrorCode    string `json:"errorCode"`
+				ErrorMessage string `json:"errorMessage"`
+			}
 			accountRootFingerprint, err := persistedConfig.SigningConfigurations.RootFingerprint()
 			if err != nil {
 				return nil, err
 			}
-			return backend.connectKeystore.connect(backend.Keystore(), accountRootFingerprint, 20*time.Minute)
+			keystoreName := ""
+			persistedKeystore, err := backend.config.AccountsConfig().LookupKeystore(accountRootFingerprint)
+			if err == nil {
+				keystoreName = persistedKeystore.Name
+			}
+			backend.Notify(observable.Event{
+				Subject: "connect-keystore",
+				Action:  action.Replace,
+				Object: data{
+					Type:         "connect",
+					KeystoreName: keystoreName,
+				},
+			})
+			ks, err := backend.connectKeystore.connect(
+				backend.Keystore(),
+				accountRootFingerprint,
+				20*time.Minute,
+			)
+			switch {
+			case errp.Cause(err) == errReplaced:
+				// If a previous connect-keystore request is in progress, the previous request is
+				// failed, but we don't dismiss the prompt, as the new prompt has already been shown
+				// by the above "connect" notification.y
+			case err == nil || errp.Cause(err) == errUserAbort:
+				// Dismiss prompt after success or upon user abort.
+
+				backend.Notify(observable.Event{
+					Subject: "connect-keystore",
+					Action:  action.Replace,
+					Object:  nil,
+				})
+			default:
+				// Display error to user.
+				errorCode := ""
+				if errp.Cause(err) == errWrongKeystore {
+					errorCode = "wrongKeystore"
+				}
+				backend.Notify(observable.Event{
+					Subject: "connect-keystore",
+					Action:  action.Replace,
+					Object: data{
+						Type:         "error",
+						ErrorCode:    errorCode,
+						ErrorMessage: err.Error(),
+					},
+				})
+			}
+			return ks, err
 		},
 		OnEvent: func(event accountsTypes.Event) {
 			backend.events <- AccountEvent{

backend/backend.go

@@ -784,3 +784,8 @@ func (backend *Backend) GetAccountFromCode(code string) (accounts.Interface, err
 
 	return acct, nil
 }
+
+// CancelConnectKeystore cancels a pending keystore connection request if one exists.
+func (backend *Backend) CancelConnectKeystore() {
+	backend.connectKeystore.cancel(errUserAbort)
+}

backend/handlers/handlers.go

@@ -103,6 +103,7 @@ type Backend interface {
 	AOPPChooseAccount(code accountsTypes.Code)
 	GetAccountFromCode(code string) (accounts.Interface, error)
 	HTTPClient() *http.Client
+	CancelConnectKeystore()
 }
 
 // Handlers provides a web api to the backend.
@@ -232,6 +233,7 @@ func NewHandlers(
 	getAPIRouterNoError(apiRouter)("/aopp/cancel", handlers.postAOPPCancelHandler).Methods("POST")
 	getAPIRouterNoError(apiRouter)("/aopp/approve", handlers.postAOPPApproveHandler).Methods("POST")
 	getAPIRouter(apiRouter)("/aopp/choose-account", handlers.postAOPPChooseAccountHandler).Methods("POST")
+	getAPIRouter(apiRouter)("/cancel-connect-keystore", handlers.postCancelConnectKeystoreHandler).Methods("POST")
 
 	devicesRouter := getAPIRouterNoError(apiRouter.PathPrefix("/devices").Subrouter())
 	devicesRouter("/registered", handlers.getDevicesRegisteredHandler).Methods("GET")
@@ -1276,3 +1278,8 @@ func (handlers *Handlers) postAOPPApproveHandler(r *http.Request) interface{} {
 	handlers.backend.AOPPApprove()
 	return nil
 }
+
+func (handlers *Handlers) postCancelConnectKeystoreHandler(r *http.Request) (interface{}, error) {
+	handlers.backend.CancelConnectKeystore()
+	return nil, nil
+}

frontends/web/src/api/backend.ts

@@ -17,6 +17,7 @@
 import { AccountCode, CoinCode } from './account';
 import { apiGet, apiPost } from '../utils/request';
 import { FailResponse, SuccessResponse } from './response';
+import { TSubscriptionCallback, subscribeEndpoint } from './subscribe';
 
 export interface ICoin {
     coinCode: CoinCode;
@@ -74,3 +75,32 @@ export const getDefaultConfig = (): Promise<any> => {
 export const socksProxyCheck = (proxyAddress: string): Promise<ISuccess> => {
   return apiPost('socksproxy/check', proxyAddress);
 };
+
+export type TSyncConnectKeystore = null | {
+  typ: 'connect';
+  keystoreName: string;
+} | {
+  typ: 'error';
+  errorCode: 'wrongKeystore';
+  errorMessage: '';
+};
+
+/**
+ * Returns a function that subscribes a callback on a "connect-keystore".
+ * Meant to be used with `useSubscribe`.
+ */
+export const syncConnectKeystore = () => {
+  return (
+    cb: TSubscriptionCallback<TSyncConnectKeystore>
+  ) => {
+    return subscribeEndpoint('connect-keystore', (
+      obj: TSyncConnectKeystore,
+    ) => {
+      cb(obj);
+    });
+  };
+};
+
+export const cancelConnectKeystore = (): Promise<void> => {
+  return apiPost('cancel-connect-keystore');
+};

frontends/web/src/app.tsx

@@ -30,6 +30,7 @@ import { Alert } from './components/alert/Alert';
 import { Aopp } from './components/aopp/aopp';
 import { Banner } from './components/banner/banner';
 import { Confirm } from './components/confirm/Confirm';
+import { KeystoreConnectPrompt } from './components/keystoreconnectprompt';
 import { panelStore } from './components/sidebar/sidebar';
 import { MobileDataWarning } from './components/mobiledatawarning';
 import { Sidebar, toggleSidebar } from './components/sidebar/sidebar';
@@ -193,6 +194,7 @@ class App extends Component<Props, State> {
                 <Banner msgKey="bitbox02" />
                 <MobileDataWarning />
                 <Aopp />
+                <KeystoreConnectPrompt />
                 {
                   Object.entries(devices).map(([deviceID, productName]) => {
                     if (productName === 'bitbox02') {

frontends/web/src/components/keystoreconnectprompt.tsx

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2023 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Button } from './forms';
+import { cancelConnectKeystore, syncConnectKeystore } from '../api/backend';
+import { useSubscribeReset } from '../hooks/api';
+import { SkipForTesting } from '../routes/device/components/skipfortesting';
+
+export function KeystoreConnectPrompt() {
+  const { t } = useTranslation();
+
+  const [data, reset] = useSubscribeReset(syncConnectKeystore());
+  if (!data) {
+    return null;
+  }
+  switch (data.typ) {
+  case 'connect':
+    // TODO: make this look nice.
+    return (
+      <>
+        { 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.
+          */}
+        <SkipForTesting />
+        <Button primary onClick={() => cancelConnectKeystore()}>{t('dialog.cancel')}</Button>
+      </>
+    );
+  case 'error':
+    return (
+      <>
+        { data.errorCode === 'wrongKeystore' ? t('error.wrongKeystore') : data.errorMessage }
+        <Button primary onClick={() => reset()}>{t('button.dismiss')}</Button>
+      </>
+    );
+  default:
+    return null;
+  }
+}

frontends/web/src/hooks/api.ts

@@ -19,13 +19,15 @@ import { TSubscriptionCallback, TUnsubscribe } from '../api/subscribe';
 import { useMountedRef } from './mount';
 
 /**
- * useSubscribe is a hook to subscribe to a subscription function.
+ * useSubscribeReset is a hook to subscribe to a subscription function.
  * starts on first render, and returns undefined while there is no first response.
  * re-renders on every update.
+ * An array is returned: `[value, reset]`, where value is the subscribed value and `reset()` resets
+ * the value to `undefined`.
  */
-export const useSubscribe = <T>(
+export const useSubscribeReset = <T>(
   subscription: ((callback: TSubscriptionCallback<T>) => TUnsubscribe),
-): (T | undefined) => {
+): [T | undefined, () => void] => {
   const [response, setResponse] = useState<T>();
   const mounted = useMountedRef();
   const subscribe = () => {
@@ -40,6 +42,18 @@ export const useSubscribe = <T>(
     // empty dependencies because it's only subscribed once
     [] // eslint-disable-line react-hooks/exhaustive-deps
   );
+  return [response, () => setResponse(undefined)];
+};
+
+/**
+ * useSubscribe is a hook to subscribe to a subscription function.
+ * starts on first render, and returns undefined while there is no first response.
+ * re-renders on every update.
+ */
+export const useSubscribe = <T>(
+  subscription: ((callback: TSubscriptionCallback<T>) => TUnsubscribe),
+): (T | undefined) => {
+  const [response] = useSubscribeReset(subscription);
   return response;
 };
 

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

@@ -487,6 +487,10 @@
     "infoWhenPaired": "First on the paired mobile and then your BitBox"
   },
   "confirmOnDevice": "Please confirm on your device.",
+  "connectKeystore": {
+    "promptNoName": "Please connect your BitBox02",
+    "promptWithName": "Please connect your BitBox02 named \"{{name}}\""
+  },
   "darkmode": {
     "toggle": "Dark mode"
   },
@@ -606,7 +610,8 @@
     "aoppUnsupportedAsset": "The asset is not supported.",
     "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."
+    "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."
   },
   "fiat": {
     "default": "default",