[WIP] connect eject remembered device

packages/connect-ui/src/components/InfoPanel.tsx

@@ -2,6 +2,10 @@ import { ReactNode } from 'react';
 
 import styled from 'styled-components';
 
+import { Button } from '@trezor/components';
+
+import { State } from '../types';
+
 const Aside = styled.aside`
     display: flex;
     flex-flow: column;
@@ -70,13 +74,28 @@ interface InfoPanelProps {
     origin?: string;
     hostLabel?: string;
     topSlot?: ReactNode;
+    preferredDevice?: State['preferredDevice'];
+    onEjectDevice?: () => void;
 }
 
-export const InfoPanel = ({ method, origin, hostLabel, topSlot }: InfoPanelProps) => (
+export const InfoPanel = ({
+    method,
+    origin,
+    topSlot,
+    hostLabel,
+    preferredDevice,
+    onEjectDevice,
+}: InfoPanelProps) => (
     <>
         <Aside data-test="@info-panel">
             {/*  notifications appear hear */}
             {topSlot && topSlot}
+            {preferredDevice && onEjectDevice && (
+                <>
+                    <div>zpreferovany device: {JSON.stringify({ preferredDevice })}</div>
+                    <Button onClick={onEjectDevice}>eject</Button>
+                </>
+            )}
 
             <MainSlot>
                 <Header>

packages/connect-ui/src/index.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useState, useMemo, ReactNode } from 'react';
 
 import styled from 'styled-components';
 
-import { UI, UI_REQUEST, POPUP, CoreRequestMessage } from '@trezor/connect';
+import { UI, UI_REQUEST, POPUP, CoreRequestMessage, createUiResponse } from '@trezor/connect';
+
 import { storage, OriginBoundState } from '@trezor/connect-common';
 
 // views
@@ -156,6 +157,12 @@ export const ConnectUI = ({ postMessage, clearLegacyView }: ConnectUIProps) => {
                             origin={state?.settings?.origin}
                             hostLabel={state?.settings?.hostLabel}
                             topSlot={Object.values(Notifications)}
+                            preferredDevice={state?.preferredDevice}
+                            onEjectDevice={() => {
+                                postMessage(createUiResponse(UI.EJECT_DEVICE));
+                                postMessage({ type: POPUP.CLOSE_WINDOW });
+                                window.close();
+                            }}
                         />
                         {Component && (
                             <div

packages/connect/src/core/index.ts

@@ -179,6 +179,19 @@ const handleMessage = (message: CoreRequestMessage) => {
             }
             break;
         }
+        // todo: not sure about name UI group
+        case UI.EJECT_DEVICE: {
+            const origin = DataManager.getSettings('origin');
+            if (!origin) {
+                return;
+            }
+            storage.save(data => {
+                delete data.origin[origin]?.preferredDevice;
+                return data;
+            });
+
+            break;
+        }
 
         // message from index
         case IFRAME.CALL:

packages/connect/src/events/ui-response.ts

@@ -19,6 +19,7 @@ export const UI_RESPONSE = {
     INVALID_PASSPHRASE_ACTION: 'ui-invalid_passphrase_action',
     CHANGE_SETTINGS: 'ui-change_settings',
     LOGIN_CHALLENGE_RESPONSE: 'ui-login_challenge_response',
+    EJECT_DEVICE: 'ui-eject_device',
 } as const;
 
 export interface UiResponsePopupHandshake {
@@ -100,6 +101,11 @@ export interface UiResponseLoginChallenge {
     };
 }
 
+export interface UiResponseEjectDevice {
+    type: typeof UI_RESPONSE.EJECT_DEVICE;
+    payload: undefined;
+}
+
 export type UiResponseEvent =
     | UiResponsePopupHandshake
     | UiResponsePermission
@@ -111,7 +117,8 @@ export type UiResponseEvent =
     | UiResponsePassphraseAction
     | UiResponseAccount
     | UiResponseFee
-    | UiResponseLoginChallenge;
+    | UiResponseLoginChallenge
+    | UiResponseEjectDevice;
 
 export type UiResponseMessage = UiResponseEvent & { event: typeof UI_EVENT };