frontend/receive: fix receive screen for software keystore

In the receive screen of accounts using the software keystore, the
address and QR code have been show upfront without needing to click a
verify button.

In watch-only, we don't know for sure which kind of keystore is behind
the account until it is connected. So we always let the user click the
verify button and react accordingly if it is a software keystore.

The label on the button says 'Verify on BitBox02' - we leave that even
for the software keystore as changing it requires re-translation of
that i18n key in all languages. The software keystore is not used in
production, so we can live with this for developers for the time
being.

The BitBox01 has its own receive-bb01.tsx component independent of
this change.

Author: benma

frontends/web/src/routes/account/receive/index.tsx

@@ -44,7 +44,6 @@ export const Receive = (props: TProps) => {
   default: // software keystore
     return (
       <ReceiveBB02
-        deviceID={deviceID}
         {...props} />
     );
   }

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

@@ -35,7 +35,6 @@ import style from './receive.module.css';
 type TProps = {
   accounts: accountApi.IAccount[];
   code: string;
-  deviceID?: string;
 };
 
 type AddressDialog = { addressType: number } | undefined;
@@ -58,10 +57,9 @@ const getIndexOfMatchingScriptType = (
 export const Receive = ({
   accounts,
   code,
-  deviceID,
 }: TProps) => {
   const { t } = useTranslation();
-  const [verifying, setVerifying] = useState<boolean>(false);
+  const [verifying, setVerifying] = useState<false | 'secure' | 'insecure'>(false);
   const [activeIndex, setActiveIndex] = useState<number>(0);
   // index into `availableScriptTypes`, or 0 if none are available.
   const [addressType, setAddressType] = useState<number>(0);
@@ -110,18 +108,26 @@ export const Receive = ({
   };
 
   const verifyAddress = async (addressesIndex: number) => {
-    if (receiveAddresses) {
-      if (code === undefined) {
-        return;
-      }
+    if (!receiveAddresses || code === undefined) {
+      return;
+    }
+    const connectResult = await accountApi.connectKeystore(code);
+    if (!connectResult.success) {
+      return;
+    }
 
-      const connectResult = await accountApi.connectKeystore(code);
-      if (!connectResult.success) {
-        return;
-      }
+    const hasSecureOutput = await accountApi.hasSecureOutput(code)();
+    if (!hasSecureOutput.hasSecureOutput) {
+      setVerifying('insecure');
+      // For the software keystore, the dialog is dismissed manually.
+      return;
+    }
 
-      setVerifying(true);
+    // For devices with a display, the dialog is dismissed by tapping the device.
+    setVerifying('secure');
+    try {
       await accountApi.verifyAddress(code, receiveAddresses[addressesIndex].addresses[activeIndex].addressID);
+    } finally {
       setVerifying(false);
     }
   };
@@ -140,10 +146,6 @@ export const Receive = ({
     }
   };
 
-  // TODO change label on verify button, make it work w/ software keystore
-  const hasDevice = true || deviceID !== undefined;
-  const enableCopy = hasDevice ? false : true;
-
   let uriPrefix = '';
   if (account) {
     if (account.coinCode === 'btc' || account.coinCode === 'tbtc') {
@@ -156,7 +158,7 @@ export const Receive = ({
   let address = '';
   if (currentAddresses) {
     address = currentAddresses[activeIndex].address;
-    if (hasDevice && !verifying) {
+    if (!verifying) {
       address = address.substring(0, 8) + '...';
     }
   }
@@ -171,7 +173,7 @@ export const Receive = ({
               { currentAddresses && (
                 <div style={{ position: 'relative' }}>
                   <div className={style.qrCodeContainer}>
-                    <QRCode data={enableCopy ? uriPrefix + address : undefined} />
+                    <QRCode data={undefined} />
                   </div>
                   <div className={style.labels}>
                     { currentAddresses.length > 1 && (
@@ -200,7 +202,7 @@ export const Receive = ({
                       </button>
                     )}
                   </div>
-                  <CopyableInput disabled={!enableCopy} value={address} flexibleHeight />
+                  <CopyableInput disabled={true} value={address} flexibleHeight />
                   { hasManyScriptTypes && (
                     <button
                       className={style.changeType}
@@ -239,8 +241,7 @@ export const Receive = ({
                   </form>
                   <div className="buttons">
                     <Button
-                      disabled={verifying}
-                      hidden={!hasDevice}
+                      disabled={verifying !== false}
                       onClick={() => verifyAddress(currentAddressIndex)}
                       primary>
                       {t('receive.verifyBitBox02')}
@@ -257,7 +258,14 @@ export const Receive = ({
                   <Dialog
                     open={!!(account && verifying)}
                     title={t('receive.verifyBitBox02')}
-                    disableEscape={true}
+                    // disable escape for secure outputs like the BitBox02, where the dialog is
+                    // dimissed by tapping the device
+                    disableEscape={verifying === 'secure'}
+                    onClose={() => {
+                      if (verifying === 'insecure') {
+                        setVerifying(false);
+                      }
+                    }}
                     medium centered>
                     {account && <>
                       <div className="text-center">