fix: wip UI

trezor · Feb 27, 2025 · ba961f1 · ba961f1
1 parent 7ea2294
commit ba961f1
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 14 deletions.
diff --git a/packages/suite/src/actions/bluetooth/bluetoothConnectDeviceThunk.ts b/packages/suite/src/actions/bluetooth/bluetoothConnectDeviceThunk.ts
@@ -15,10 +15,9 @@ export const bluetoothConnectDeviceThunk = createThunk<
     `${BLUETOOTH_PREFIX}/bluetoothConnectDeviceThunk`,
     async ({ id }, { fulfillWithValue, dispatch }) => {
         const result = await bluetoothIpc.connectDevice(id);
+        console.log('_____calling: bluetoothIpc.connectDevice(id)', id);
 
         if (!result.success) {
-            console.log('_______bluetoothConnectDeviceThunk :: result', result);
-
             dispatch(
                 notificationsActions.addToast({
                     type: 'error',

diff --git a/packages/suite/src/actions/bluetooth/bluetoothDisconnectDeviceThunk.ts b/packages/suite/src/actions/bluetooth/bluetoothDisconnectDeviceThunk.ts
@@ -14,6 +14,7 @@ export const bluetoothDisconnectDeviceThunk = createThunk<
 >(
     `${BLUETOOTH_PREFIX}/bluetoothConnectDeviceThunk`,
     async ({ id }, { fulfillWithValue, dispatch }) => {
+        console.log('_____calling: bluetoothIpc.disconnectDevice(id)', id);
         const result = await bluetoothIpc.disconnectDevice(id);
 
         if (!result.success) {

diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothConnect.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothConnect.tsx
@@ -157,6 +157,7 @@ export const BluetoothConnect = ({ onClose, uiMode }: BluetoothConnectProps) =>
         <BluetoothDeviceList
             isDisabled={false}
             onSelect={onSelect}
+            onError={handlePairingCancel}
             deviceList={devices}
             isScanning={isScanning}
             uiMode={uiMode}

diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothDeviceComponent.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothDeviceComponent.tsx
@@ -1,10 +1,29 @@
+import { useEffect, useState } from 'react';
+
 import { Column, FlexProps, Icon, Row, Text } from '@trezor/components';
 import { DeviceModelInternal } from '@trezor/connect';
 import { models } from '@trezor/connect/src/data/models'; // Todo: solve this import issue
 import { RotateDeviceImage } from '@trezor/product-components';
 import { spacings } from '@trezor/theme';
 import { BluetoothDevice } from '@trezor/transport-bluetooth';
 
+const TimeAgo = ({ timestamp }: { timestamp: number }) => {
+    const [secAgo, setSecAgo] = useState(0);
+
+    useEffect(() => {
+        setSecAgo(Math.floor((Date.now() - timestamp) / 1000));
+        const interval = setInterval(() => setSecAgo(t => t + 1), 1000);
+
+        return () => clearInterval(interval);
+    }, [timestamp]);
+
+    return (
+        <>
+            <Text variant="warning">{secAgo}</Text>s ago
+        </>
+    );
+};
+
 type BluetoothDeviceProps = {
     device: BluetoothDevice;
     flex?: FlexProps['flex'];
@@ -23,7 +42,7 @@ export const BluetoothDeviceComponent = ({ device, flex, margin }: BluetoothDevi
 
     const model = getModelEnumFromBytesUtil(device.data[2]);
     const color = getColorEnumFromVariantBytesUtil(device.data[1]);
-    const colorName = models[model].colors[color.toString()];
+    const colorName = color !== undefined ? models[model].colors[color.toString()] : '';
 
     return (
         <Row gap={spacings.md} alignItems="stretch" flex={flex} margin={margin}>
@@ -36,8 +55,11 @@ export const BluetoothDeviceComponent = ({ device, flex, margin }: BluetoothDevi
 
             <Column justifyContent="start" alignItems="start" flex="1">
                 <Text typographyStyle="body">Trezor Safe 7</Text>
-                <Text typographyStyle="hint" variant="tertiary">
-                    <pre>{device.macAddress}</pre>
+                <Text>
+                    <Text typographyStyle="hint" variant="purple">
+                        <pre>{device.macAddress}</pre>
+                    </Text>
+                    <TimeAgo timestamp={device.lastUpdatedTimestamp} />
                 </Text>
                 <Row>
                     <Text typographyStyle="hint" variant="tertiary">

diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothDeviceItem.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothDeviceItem.tsx
@@ -27,10 +27,16 @@ const DISABLED_STATUSES: DeviceBluetoothConnectionStatusType[] = ['pairing', 'co
 type BluetoothDeviceItemProps = {
     device: BluetoothDevice;
     onSelect: (id: string) => void;
+    onError: () => void;
     uiMode: 'spatial' | 'card';
 };
 
-export const BluetoothDeviceItem = ({ device, onSelect, uiMode }: BluetoothDeviceItemProps) => {
+export const BluetoothDeviceItem = ({
+    device,
+    onSelect,
+    onError,
+    uiMode,
+}: BluetoothDeviceItemProps) => {
     const dispatch = useDispatch();
 
     const [isLoading, setIsLoading] = useState(false);
@@ -45,6 +51,10 @@ export const BluetoothDeviceItem = ({ device, onSelect, uiMode }: BluetoothDevic
         if (uiMode === 'card' && result.success) {
             dispatch(closeModalApp());
         }
+
+        if (!result.success) {
+            onError();
+        }
     };
 
     const onDisconnect = async () => {

diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothDeviceList.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothDeviceList.tsx
@@ -18,13 +18,15 @@ const SkeletonDevice = () => (
 type BluetoothDeviceListProps = {
     deviceList: BluetoothDevice[];
     onSelect: (id: string) => void;
+    onError: () => void;
     isScanning: boolean;
     isDisabled: boolean;
     uiMode: 'spatial' | 'card';
 };
 
 export const BluetoothDeviceList = ({
     onSelect,
+    onError,
     deviceList,
     isScanning,
     uiMode,
@@ -36,6 +38,7 @@ export const BluetoothDeviceList = ({
                     key={device.id}
                     device={device}
                     onSelect={onSelect}
+                    onError={onError}
                     uiMode={uiMode}
                 />
             ))}

diff --git a/packages/suite/src/components/suite/bluetooth/BluetoothSelectedDevice.tsx b/packages/suite/src/components/suite/bluetooth/BluetoothSelectedDevice.tsx
@@ -58,23 +58,23 @@ const OkComponent = ({ device, onCancel }: OkComponentProps) => {
     );
 
     const map: Record<DeviceBluetoothConnectionStatusType, ReactNode> = {
-        'connection-error': 'Connection failed', // Shall not be shown in the UI
-        'pairing-error': 'Pairing failed', // Shall not be shown in the UI
         disconnected: 'Disconnected', // Shall not be shown in the UI
-        connecting: (
+        pairing: (
             <>
-                <ConnectingComponent />
+                <PairingComponent />
                 <CancelButton />
             </>
         ),
-        connected: <ConnectedComponent />,
-        pairing: (
+        paired: <PairedComponent />,
+        'pairing-error': 'Pairing failed', // Shall not be shown in the UI
+        connecting: (
             <>
-                <PairingComponent />
+                <ConnectingComponent />
                 <CancelButton />
             </>
         ),
-        paired: <PairedComponent />,
+        connected: <ConnectedComponent />,
+        'connection-error': 'Connection failed', // Shall not be shown in the UI
     };
 
     return (