fixup! WIP: design

trezor · Nov 29, 2024 · cc67d7b · cc67d7b
1 parent 565767a
commit cc67d7b
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 39 deletions.
diff --git a/packages/suite/src/actions/bluetooth/bluetoothActions.ts b/packages/suite/src/actions/bluetooth/bluetoothActions.ts
@@ -0,0 +1,43 @@
+import { createAction } from '@reduxjs/toolkit';
+
+import { ElectronBluetoothDevice } from '@trezor/suite-desktop-api';
+
+export const BLUETOOTH_PREFIX = '@suite/bluetooth';
+
+export const bluetoothAdapterEventAction = createAction(
+    `${BLUETOOTH_PREFIX}/adapter-event`,
+    ({ isPowered }: { isPowered: boolean }) => ({
+        payload: {
+            isPowered,
+        },
+    }),
+);
+
+export const bluetoothSelectDeviceEventAction = createAction(
+    `${BLUETOOTH_PREFIX}/select-device-event`,
+    ({ devices }: { devices: ElectronBluetoothDevice[] }) => ({
+        payload: {
+            devices,
+        },
+    }),
+);
+
+export const bluetoothConnectDeviceEventAction = createAction(
+    `${BLUETOOTH_PREFIX}/connect-device-event`,
+    ({ device, phase }: { device: ElectronBluetoothDevice; phase: string }) => ({
+        payload: {
+            device,
+            phase,
+        },
+    }),
+);
+
+export const bluetoothPairDeviceEventAction = createAction(
+    `${BLUETOOTH_PREFIX}/pair-device-event`,
+    ({ paired, pin }: { paired: boolean; pin: string }) => ({
+        payload: {
+            paired,
+            pin,
+        },
+    }),
+);
diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothConnect.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothConnect.tsx
@@ -10,12 +10,14 @@ import { BluetoothNotEnabled } from './errors/BluetoothNotEnabled';
 import { BluetoothDeviceList } from './BluetoothDeviceList';
 import { BluetoothVersionNotCompatible } from './errors/BluetoothVersionNotCompatible';
 import { BluetoothTips } from './BluetoothTips';
-import { BluetoothPairingPin } from './BluetoothPairingPin';
 import { BluetoothScanHeader } from './BluetoothScanHeader';
 import { BluetoothScanFooter } from './BluetoothScanFooter';
-import { FakeScanStatus, DeviceBluetoothStatus } from './types';
 import { useDispatch } from '../../../hooks/suite';
 import { BluetoothSelectedDevice } from './BluetoothSelectedDevice';
+import {
+    DeviceBluetoothStatus,
+    FakeScanStatus,
+} from '../../../reducers/bluetooth/bluetoothReducer';
 
 const FAKE_SCAN_TIMEOUT = 30_000;
 
@@ -46,6 +48,7 @@ export const BluetoothConnect = ({ onClose }: BluetoothConnectProps) => {
             }
         });
 
+        // Todo: rename to something more like: `update-device-list`
         desktopApi.on('bluetooth/device-list-update', list => {
             console.warn('bluetooth/device-list-update', list);
             setDeviceList(list);
@@ -114,8 +117,6 @@ export const BluetoothConnect = ({ onClose }: BluetoothConnectProps) => {
         }
     };
 
-    // const isLoading = connectingStatus && connectingStatus.status !== 'error';
-
     if (!isBluetoothEnabled) {
         return <BluetoothNotEnabled onCancel={onClose} />;
     }

diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothSelectedDevice.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothSelectedDevice.tsx
@@ -14,6 +14,13 @@ export type BluetoothSelectedDeviceProps = {
     onCancel: () => void;
 };
 
+const PairingComponent = () => (
+    <Row gap={spacings.xs} alignItems="center">
+        <Spinner size={spacings.sm} />
+        <Text variant="tertiary">Pairing</Text>
+    </Row>
+);
+
 export const BluetoothSelectedDevice = ({
     device,
     status,
@@ -27,30 +34,15 @@ export const BluetoothSelectedDevice = ({
                 <Text variant="destructive">Error</Text>
             </Row>
         ),
-        pairing: () => (
-            <Row gap={spacings.xs} alignItems="center">
-                <Spinner size={spacings.sm} />
-                <Text variant="tertiary">Pairing</Text>
-            </Row>
-        ),
-        paired: () => (
-            <Row gap={spacings.xs} alignItems="center">
-                <Icon size="small" name="check"></Icon>
-                <Text variant="primary">Paired</Text>
-            </Row>
-        ),
-        connecting: () => (
-            <Row gap={spacings.xs} alignItems="center">
-                <Spinner size={spacings.sm} />
-                <Text variant="tertiary">Connecting</Text>
-            </Row>
-        ),
+        pairing: () => <PairingComponent />,
+        paired: () => <PairingComponent />,
+        connecting: () => <PairingComponent />,
 
         // Todo: here we shall solve how to continue with Trezor Host Protocol
         connected: () => (
             <Row gap={spacings.xs} alignItems="center">
                 <Icon size="small" name="check"></Icon>
-                <Text variant="primary">Waiting</Text>
+                <Text variant="primary">Paired</Text>
             </Row>
         ),
     };

diff --git a/packages/suite/src/components/suite/bluetooth/NotTrezorYouAreLookingFor.tsx b/packages/suite/src/components/suite/bluetooth/NotTrezorYouAreLookingFor.tsx
@@ -18,7 +18,7 @@ export const NotTrezorYouAreLookingFor = ({ onReScanClick }: NotTrezorYouAreLook
             fillType="none"
             paddingType="none"
             headingSize="medium"
-            // toggleComponent={}
+            toggleIconName="chevronDown"
             heading={
                 <Link typographyStyle="hint" variant="underline" onClick={() => setShowTips(true)}>
                     <Text variant="tertiary">Not the Trezor you’re looking for?</Text>

diff --git a/packages/suite/src/components/suite/bluetooth/errors/BluetoothNotEnabled.tsx b/packages/suite/src/components/suite/bluetooth/errors/BluetoothNotEnabled.tsx
@@ -14,9 +14,7 @@ export const BluetoothNotEnabled = ({ onCancel }: BluetoothNotEnabledProps) => {
     const openSettings = async () => {
         const opened = await desktopApi.bluetoothOpenSettings();
 
-        console.log('opened', opened);
-
-        if (!opened.success || !opened.payload) {
+        if (!opened.success) {
             setHasDeeplinkFailed(true);
         }
     };

diff --git a/packages/suite/src/components/suite/bluetooth/types.ts b/packages/suite/src/components/suite/bluetooth/types.ts
diff --git a/packages/suite/src/reducers/bluetooth/bluetoothReducer.ts b/packages/suite/src/reducers/bluetooth/bluetoothReducer.ts
@@ -0,0 +1,58 @@
+import { createReducer } from '@reduxjs/toolkit';
+
+import {
+    ElectronBluetoothDevice,
+    BluetoothDeviceConnectionStatus,
+} from '@trezor/suite-desktop-api';
+
+import {
+    bluetoothAdapterEventAction,
+    bluetoothConnectDeviceEventAction,
+    bluetoothPairDeviceEventAction,
+    bluetoothSelectDeviceEventAction,
+} from '../../actions/bluetooth/bluetoothActions';
+
+export type FakeScanStatus = 'running' | 'done';
+
+export type DeviceBluetoothStatus =
+    | BluetoothDeviceConnectionStatus
+    | {
+          uuid: string;
+          type: 'found' | 'error';
+      };
+
+export type DeviceBluetoothStatusType = DeviceBluetoothStatus['type'];
+
+// Todo: discuss with Native Guys
+
+type BluetoothState = {
+    isBluetoothEnabled: boolean;
+    fakeScanStatus: FakeScanStatus;
+    deviceList: { device: ElectronBluetoothDevice; pairingStatus: DeviceBluetoothStatus }[];
+
+    selectedDevice?: string;
+};
+
+const initialState: BluetoothState = {
+    isBluetoothEnabled: false,
+    fakeScanStatus: 'done',
+    deviceList: [],
+    selectedDevice: undefined,
+};
+
+export const bluetoothReducer = createReducer(initialState, builder => {
+    builder
+        .addCase(bluetoothAdapterEventAction, (state, { payload: { isPowered } }) => {
+            state.isBluetoothEnabled = isPowered;
+        })
+        .addCase(bluetoothSelectDeviceEventAction, (state, { payload: { devices } }) => {
+            state.deviceList = devices;
+        })
+        .addCase(bluetoothConnectDeviceEventAction, (state, { payload: { device, phase } }) => {
+            // state.selectedDevice;
+            // Todo: solve
+        })
+        .addCase(bluetoothPairDeviceEventAction, (state, { payload: { paired, pin } }) => {
+            state.selectedDeviceStatus = { type: paired ? 'paired' : 'pairing', pin };
+        });
+});
diff --git a/packages/suite/src/reducers/store.ts b/packages/suite/src/reducers/store.ts
@@ -20,6 +20,7 @@ import walletReducers from 'src/reducers/wallet';
 import onboardingReducers from 'src/reducers/onboarding';
 import recoveryReducers from 'src/reducers/recovery';
 import backupReducers from 'src/reducers/backup';
+import { bluetoothReducer } from 'src/reducers/bluetooth/bluetoothReducer';
 // toastMiddleware can be used only in suite-desktop and suite-web
 // it's not included into `@suite-middlewares` index
 import toastMiddleware from 'src/middlewares/suite/toastMiddleware';
@@ -40,6 +41,7 @@ const rootReducer = combineReducers({
     backup: backupReducers,
     desktop: desktopReducer,
     tokenDefinitions: tokenDefinitionsReducer,
+    bluetooth: bluetoothReducer,
 });
 
 export type AppState = ReturnType<typeof rootReducer>;