Merge branch 'select-bb-ios'

Author: benma

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

@@ -5,6 +5,10 @@
   margin-top: var(--spacing-default);
 }
 
+.innerContainer {
+  background: var(--background);
+}
+
 .label {
   margin-top: var(--spacing-default);
 }
@@ -22,4 +26,4 @@
   .label {
     text-align: center;
   }
-}
+}

frontends/web/src/components/bluetooth/bluetooth.tsx

@@ -31,7 +31,11 @@ const isConnectedOrConnecting = (peripheral: TPeripheral) => {
   return peripheral.connectionState === 'connecting' || peripheral.connectionState === 'connected';
 };
 
-const _Bluetooth = () => {
+type Props = {
+  peripheralContainerClassName?: string;
+}
+
+const _Bluetooth = ({ peripheralContainerClassName }: Props) => {
   const { t } = useTranslation();
   const state = useSync(getState, syncState);
   const [showConnectionIssues, setShowConnectionIssues] = useState(false);
@@ -85,6 +89,7 @@ const _Bluetooth = () => {
           ) : undefined;
           return (
             <ActionableItem
+              className={peripheralContainerClassName}
               key={peripheral.identifier}
               icon={connectingIcon}
               onClick={onClick}>
@@ -109,7 +114,9 @@ const _Bluetooth = () => {
         })}
       </div>
       {state.scanning && (
-        <HorizontallyCenteredSpinner />
+        <div>
+          <HorizontallyCenteredSpinner />
+        </div>
       )}
 
       {showConnectionIssues && (
@@ -131,9 +138,9 @@ const _Bluetooth = () => {
   );
 };
 
-export const Bluetooth = () => {
+export const Bluetooth = ({ peripheralContainerClassName = '' }: Props) => {
   if (!runningInIOS()) {
     return null;
   }
-  return <_Bluetooth />;
+  return <_Bluetooth peripheralContainerClassName={peripheralContainerClassName} />;
 };

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

@@ -3,7 +3,7 @@
     margin-bottom: calc(var(--space-default) + var(--space-quarter));
 }
 
-.bitboxContainer > div img {
+.bitboxContainer > div > img {
     width: 198px;
     height: 115px;
     margin-right: var(--space-default);
@@ -14,6 +14,9 @@
     height: 20px;
 }
 
+.bluetoothPeripheralContainer {
+    background: var(--background);
+}
 
 .bitboxContainer.failed {
     align-items: center;
@@ -36,8 +39,17 @@
     font-size: 16px;
 }
 
+.dialogButtonsContainer {
+    margin-top: var(--space-large);
+}
+
+.unlockTestButtonContainer {
+    margin-top: calc(var(--space-large) + var(--space-default));
+}
+
 @media (max-width: 768px) {
     .text {
         font-size: var(--size-default);
     }
 }
+

frontends/web/src/components/keystoreconnectprompt.tsx

@@ -17,12 +17,14 @@
 import { useTranslation } from 'react-i18next';
 import { ReactElement } from 'react';
 import { Button } from './forms';
+import { Bluetooth } from '@/components/bluetooth/bluetooth';
 import { TConnectKeystoreErrorCode, 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 { UseBackButton } from '@/hooks/backbutton';
+import { runningInIOS } from '@/utils/env';
 import { SkipForTesting } from '@/routes/device/components/skipfortesting';
 import styles from './keystoreconnectprompt.module.css';
 
@@ -82,13 +84,19 @@ export const KeystoreConnectPrompt = () => {
           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.
+          For iOS, the device picker is needed.
           */}
-          <PointToBitBox02 />
-          <SkipForTesting />
+          { !runningInIOS() ? <PointToBitBox02 /> : null }
+          <Bluetooth peripheralContainerClassName={styles.bluetoothPeripheralContainer} />
+          <div className={!runningInIOS() ? '' : styles.unlockTestButtonContainer}>
+            <SkipForTesting />
+          </div>
+        </div>
+        <div className={styles.dialogButtonsContainer}>
+          <DialogButtons>
+            <Button secondary onClick={cancelConnectKeystore}>{t('dialog.cancel')}</Button>
+          </DialogButtons>
         </div>
-        <DialogButtons>
-          <Button secondary onClick={cancelConnectKeystore}>{t('dialog.cancel')}</Button>
-        </DialogButtons>
       </Dialog>
     );
   case 'error':