chore(connect-ui): mirror store to local react state

packages/connect-popup/src/view/common.tsx

@@ -3,15 +3,15 @@
 import { POPUP, ERRORS, PopupInit, CoreMessage, createUiResponse } from '@trezor/connect';
 import { createRoot } from 'react-dom/client';
 
-import { ConnectUI, State } from '@trezor/connect-ui';
+import { ConnectUI, State, getDefaultState } from '@trezor/connect-ui';
 import { StyleSheetWrapper } from './react/StylesSheetWrapper';
 import { reactEventBus } from '@trezor/connect-ui/src/utils/eventBus';
 
 export const header: HTMLElement = document.getElementsByTagName('header')[0];
 export const container: HTMLElement = document.getElementById('container')!;
 export const views: HTMLElement = document.getElementById('views')!;
 
-let state: State = {};
+let state: State = getDefaultState();
 
 export const setState = (newState: Partial<State>) => (state = { ...state, ...newState });
 export const getState = () => state;

packages/connect-ui/src/index.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState, useMemo, ReactNode } from 'react';
 import styled from 'styled-components';
 
 import { PostMessage, UI, UI_REQUEST, POPUP, createPopupMessage } from '@trezor/connect';
+import { storage, OriginBoundState } from '@trezor/connect-common';
 
 // views
 import { Transport } from './views/Transport';
@@ -67,8 +68,31 @@ export const ConnectUI = ({ postMessage, clearLegacyView }: ConnectUIProps) => {
     useEffect(() => {
         reactEventBus.dispatch({ type: 'connect-ui-rendered' });
         initAnalytics();
+
+        // subscribe to changes
+        storage.on('changed', storageNextState => {
+            setState(prevState => ({ ...prevState, ...storageNextState }));
+        });
     }, []);
 
+    useEffect(() => {
+        if (!state?.settings?.origin) return;
+
+        const data = storage.loadForOrigin(state.settings.origin);
+
+        const getNextState = (prevState: State, originBoundState: OriginBoundState) => ({
+            ...prevState,
+            ...originBoundState,
+        });
+
+        // load initial data
+        setState(prevState => getNextState(prevState, data));
+
+        return () => {
+            storage.removeAllListeners();
+        };
+    }, [state?.settings?.origin]);
+
     const [Component, Notifications] = useMemo(() => {
         let component: ReactNode | null;
 

packages/connect-ui/src/types.ts

@@ -1,13 +1,15 @@
 import { PopupHandshake, PopupMethodInfo, IFrameLoaded } from '@trezor/connect';
 import type { Core } from '@trezor/connect/lib/core';
+import type { OriginBoundState } from '@trezor/connect-common';
 
 export type State = Partial<PopupHandshake['payload']> &
     Partial<PopupMethodInfo['payload']> &
     Partial<IFrameLoaded['payload']> & {
         iframe?: Window;
         broadcast?: BroadcastChannel;
         core?: Core;
-        // preferred device will appear here
-    };
+    } & Partial<OriginBoundState>;
 
-export const getDefaultState = (): State => ({});
+export const getDefaultState = (): State => ({
+    permissions: [],
+});