From 4698803ff5f4a6be2efbf0903cf2a8083b50a0d4 Mon Sep 17 00:00:00 2001
From: mroz <mvarmuza@gmail.com>
Date: Tue, 30 Aug 2022 16:50:41 +0200
Subject: [PATCH] wip

---
 packages/components/package.json              |  2 +-
 .../Passphrase/PassphraseTypeCard.tsx         | 99 +++++++++++--------
 .../src/components/Tooltip/index.tsx          |  2 +-
 packages/components/src/config/motion.ts      |  4 +
 packages/connect-explorer/README.md           |  2 +-
 packages/connect-popup/package.json           | 10 +-
 packages/connect-popup/src/index.tsx          | 36 +++----
 packages/connect-popup/src/view/common.tsx    | 21 ++--
 .../src/view/react/StylesSheetWrapper.tsx     |  6 +-
 packages/connect-ui/package.json              |  7 +-
 .../src/components/ThemeWrapper.tsx           | 24 -----
 packages/connect-ui/src/components/View.tsx   | 13 ++-
 packages/connect-ui/src/index.ts              |  8 --
 packages/connect-ui/src/index.tsx             | 39 ++++++++
 .../connect-ui/src/support/ErrorBoundary.tsx  | 28 ++++++
 .../connect-ui/src/support/IntlWrapper.tsx    | 23 +++++
 .../connect-ui/src/support/ThemeWrapper.tsx   | 13 +++
 packages/connect-ui/src/views/Passphrase.tsx  | 66 ++++++++++---
 .../src/views/PassphraseOnDevice.tsx          |  5 +-
 packages/connect-ui/src/views/Transport.tsx   |  3 +
 packages/connect-ui/tsconfig.json             |  1 +
 packages/connect/src/events/ui-request.ts     | 69 ++++++++++---
 .../suite/src/components/onboarding/Box.tsx   |  7 +-
 .../ConnectDevicePromptManager/index.tsx      |  4 +-
 .../src/components/suite/CollapsibleBox.tsx   |  4 +-
 .../components/suite/ConnectDevicePrompt.tsx  |  4 +-
 .../suite/PrerequisitesGuide/index.tsx        |  5 +-
 .../suite/modals/Passphrase/index.tsx         | 22 +++++
 yarn.lock                                     | 27 ++++-
 29 files changed, 384 insertions(+), 170 deletions(-)
 delete mode 100644 packages/connect-ui/src/components/ThemeWrapper.tsx
 delete mode 100644 packages/connect-ui/src/index.ts
 create mode 100644 packages/connect-ui/src/index.tsx
 create mode 100644 packages/connect-ui/src/support/ErrorBoundary.tsx
 create mode 100644 packages/connect-ui/src/support/IntlWrapper.tsx
 create mode 100644 packages/connect-ui/src/support/ThemeWrapper.tsx

diff --git a/packages/components/package.json b/packages/components/package.json
index c430268d24be..afb821a31c97 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -5,7 +5,6 @@
     "main": "src/index",
     "author": "SatoshiLabs s.r.o.",
     "license": "SEE LICENSE IN LICENSE.md",
-    "sideEffects": false,
     "scripts": {
         "lint": "yarn lint:js && yarn lint:styles",
         "lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
@@ -24,6 +23,7 @@
         "lottie-react": "^2.3.1",
         "polished": "^4.2.2",
         "react-date-range": "^1.4.0",
+        "react-intl": "^6.0.5",
         "react-select": "^5.4.0",
         "react-svg": "^15.1.6",
         "react-truncate": "^2.4.0",
diff --git a/packages/components/src/components/Passphrase/PassphraseTypeCard.tsx b/packages/components/src/components/Passphrase/PassphraseTypeCard.tsx
index 81140e17f1e6..493330708fb1 100644
--- a/packages/components/src/components/Passphrase/PassphraseTypeCard.tsx
+++ b/packages/components/src/components/Passphrase/PassphraseTypeCard.tsx
@@ -1,40 +1,36 @@
 // pull this component up to some share logic.
 
 // todo: reorganize imports
-
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+
 import { AnimatePresence, motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+
 import { useKeyPress } from '@trezor/react-utils';
 import { setCaretPosition } from '@trezor/dom-utils';
-import styled, { css } from 'styled-components';
+import { countBytesInString } from '@trezor/utils';
 
-// ok
 import {
     Button,
     useTheme,
     variables,
     Input,
     Tooltip,
+    TooltipProps,
     Checkbox,
     Icon,
     motionProps,
-} from '@trezor/components';
-import { countBytesInString } from '@trezor/utils';
-
-// move to another package, shared package should not import from suite
-
-// moved
+} from '../..';
 import PasswordStrengthIndicator from './PasswordStrengthIndicator';
 
 const MAX_LENGTH = 50;
 
 // todo: refactor these, translations, modal, etc
-// import { useTranslation } from '@suite-hooks';
-// import { OpenGuideFromTooltip } from '@guide-components';
-// import { Translation } from '@suite-components/Translation';
+
 // import { isAndroid } from '@trezor/suite/src/utils/suite/env';
 
-const Wrapper = styled.div<Pick<Props, 'type' | 'singleColModal'>>`
+const Wrapper = styled.div<Pick<PassphraseTypeCardProps, 'type' | 'singleColModal'>>`
     display: flex;
     flex: 1;
     /* align-items: center; */
@@ -61,7 +57,7 @@ const Wrapper = styled.div<Pick<Props, 'type' | 'singleColModal'>>`
         `}
 `;
 
-const IconWrapper = styled.div<Pick<Props, 'type'>>`
+const IconWrapper = styled.div<Pick<PassphraseTypeCardProps, 'type'>>`
     width: 38px;
     height: 38px;
     background: ${props =>
@@ -96,7 +92,7 @@ const WalletTitle = styled.div<{ withMargin: boolean }>`
     ${props => props.withMargin && `margin-bottom: 5px;`}
 `;
 
-const Description = styled.div<Pick<Props, 'authConfirmation'>>`
+const Description = styled.div<Pick<PassphraseTypeCardProps, 'authConfirmation'>>`
     display: flex;
     color: ${props => props.theme.TYPE_LIGHT_GREY};
     font-size: ${variables.FONT_SIZE.TINY};
@@ -172,10 +168,7 @@ const RetryButton = styled(Button)`
     margin-top: 16px;
 `;
 
-// todo: how about translations? pass translation component? pass translated string?
-const Translation = ({ id }: { id: string }) => <div>{id}</div>;
-
-type Props = {
+type PassphraseTypeCardProps = {
     title?: React.ReactNode;
     description?: React.ReactNode;
     submitLabel: React.ReactNode;
@@ -185,13 +178,17 @@ type Props = {
     authConfirmation?: boolean;
     onSubmit: (value: string, passphraseOnDevice?: boolean) => void;
     recreateWallet?: () => void;
+    learnMoreTooltipOnClick?: TooltipProps['guideAnchor'];
+    learnMoreTooltipAppendTo?: TooltipProps['appendTo'];
 };
 
 const DOT = '●';
 
-export const PassphraseTypeCard = (props: Props) => {
+export const PassphraseTypeCard = (props: PassphraseTypeCardProps) => {
+    console.log('PassphraseTypeCard', props);
+
     const theme = useTheme();
-    // const { translationString } = useTranslation();
+    const intl = useIntl();
     const [value, setValue] = useState('');
     const [enabled, setEnabled] = useState(!props.authConfirmation);
     const [showPassword, setShowPassword] = useState(false);
@@ -208,7 +205,6 @@ export const PassphraseTypeCard = (props: Props) => {
     const { onSubmit } = props;
     const submit = useCallback(
         (value: string, passphraseOnDevice?: boolean) => {
-            console.log('enabled', enabled);
             if (!enabled) return;
             onSubmit(value, passphraseOnDevice);
         },
@@ -309,16 +305,22 @@ export const PassphraseTypeCard = (props: Props) => {
                             >
                                 {props.type === 'hidden' ? (
                                     <Tooltip
-                                        // title={<Translation id="TR_WHAT_IS_PASSPHRASE" />}
-                                        // guideAnchor={instance => (
-                                        //     <OpenGuideFromTooltip
-                                        //         dataTest="@tooltip/guideAnchor"
-                                        //         id="/security/passphrase.md"
-                                        //         instance={instance}
-                                        //     />
-                                        // )}
-                                        // content={<Translation id="TR_HIDDEN_WALLET_TOOLTIP" />}
-                                        title={<div>"todo: pass tooltip as prop?"</div>}
+                                        appendTo={props.learnMoreTooltipAppendTo}
+                                        title={
+                                            <FormattedMessage
+                                                id="TR_WHAT_IS_PASSPHRASE"
+                                                defaultMessage="Learn more about the difference"
+                                            />
+                                        }
+                                        guideAnchor={props.learnMoreTooltipOnClick}
+                                        content={
+                                            <FormattedMessage
+                                                id="TR_HIDDEN_WALLET_TOOLTIP"
+                                                defaultMessage={
+                                                    'Passphrases add a custom phrase (e.g. a word, sentence, or string of characters) to your recovery seed. This creates a hidden wallet; each hidden wallet can use its own passphrase. Your standard wallet will still be accessible without a passphrase.'
+                                                }
+                                            />
+                                        }
                                         dashed
                                     >
                                         <>{props.title}</>
@@ -345,13 +347,24 @@ export const PassphraseTypeCard = (props: Props) => {
                         <InputWrapper authConfirmation={props.authConfirmation}>
                             <PassphraseInput
                                 data-test="@passphrase/input"
-                                // placeholder={translationString('TR_ENTER_PASSPHRASE')}
-                                placeholder="todo: pass as prop? translation?"
+                                placeholder={intl.formatMessage({
+                                    defaultMessage: 'Enter passphrase',
+                                    id: 'TR_ENTER_PASSPHRASE',
+                                })}
                                 onChange={onPassphraseChange}
                                 value={displayValue}
                                 innerRef={ref}
                                 bottomText={
-                                    isTooLong ? <Translation id="TR_PASSPHRASE_TOO_LONG" /> : null
+                                    isTooLong ? (
+                                        <FormattedMessage
+                                            id="TR_PASSPHRASE_TOO_LONG"
+                                            defaultMessage={
+                                                'Passphrase length has exceed the allowed limit.'
+                                            }
+                                        />
+                                    ) : (
+                                        'not too long'
+                                    )
                                 }
                                 inputState={isTooLong ? 'error' : undefined}
                                 noTopLabel
@@ -386,7 +399,12 @@ export const PassphraseTypeCard = (props: Props) => {
                         onClick={() => setEnabled(!enabled)}
                         isChecked={enabled}
                     >
-                        <Translation id="TR_I_UNDERSTAND_PASSPHRASE" />
+                        <FormattedMessage
+                            id="TR_I_UNDERSTAND_PASSPHRASE"
+                            defaultMessage={
+                                'I understand, passphrases cannot be retrieved unlike everyday passwords'
+                            }
+                        />
                     </Checkbox>
                 </Content>
             )}
@@ -410,7 +428,6 @@ export const PassphraseTypeCard = (props: Props) => {
                                 </ActionButton>
                             </motion.div>
                         )}
-
                         {/* Offer entering passphrase on a device */}
                         {props.offerPassphraseOnDevice && (
                             <OnDeviceActionButton
@@ -419,10 +436,12 @@ export const PassphraseTypeCard = (props: Props) => {
                                 onClick={() => submit(value, true)}
                                 fullWidth
                             >
-                                <Translation id="TR_ENTER_PASSPHRASE_ON_DEVICE" />
+                                <FormattedMessage
+                                    id="TR_ENTER_PASSPHRASE_ON_DEVICE"
+                                    defaultMessage="Enter passphrase on Trezor"
+                                />
                             </OnDeviceActionButton>
                         )}
-
                         {/* Try again button shows while confirming a passphrase */}
                         {props.recreateWallet && (
                             <RetryButton
@@ -431,7 +450,7 @@ export const PassphraseTypeCard = (props: Props) => {
                                 color={theme.TYPE_LIGHT_GREY}
                                 onClick={props.recreateWallet}
                             >
-                                <Translation id="TR_TRY_AGAIN" />
+                                <FormattedMessage id="TR_TRY_AGAIN" defaultMessage={'Try again'} />
                             </RetryButton>
                         )}
                     </Actions>
diff --git a/packages/components/src/components/Tooltip/index.tsx b/packages/components/src/components/Tooltip/index.tsx
index 46af2fa843dc..57626a83f4ef 100644
--- a/packages/components/src/components/Tooltip/index.tsx
+++ b/packages/components/src/components/Tooltip/index.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import React, { ReactNode, useMemo, useRef, useState } from 'react';
-import { motion, Variants } from 'framer-motion';
+import { filterProps, motion, Variants } from 'framer-motion';
 import Tippy, { TippyProps } from '@tippyjs/react/headless';
 import { Instance } from 'tippy.js';
 import { transparentize } from 'polished';
diff --git a/packages/components/src/config/motion.ts b/packages/components/src/config/motion.ts
index 8574ad20e39e..874399d2aeb3 100644
--- a/packages/components/src/config/motion.ts
+++ b/packages/components/src/config/motion.ts
@@ -17,3 +17,7 @@ export const EXPAND = {
     exit: 'initial',
     transition: { duration: 0.24, ease: 'easeInOut' },
 };
+
+export const transitionEase = [0.65, 0, 0.35, 1];
+export const enterEase = [0.33, 1, 0.68, 1];
+export const exitEase = [0.32, 0, 0.67, 0];
diff --git a/packages/connect-explorer/README.md b/packages/connect-explorer/README.md
index b8b431d334bb..c7f9ee8d54f5 100644
--- a/packages/connect-explorer/README.md
+++ b/packages/connect-explorer/README.md
@@ -9,7 +9,7 @@ To run the explorer locally:
 
 `yarn workspace @trezor/connect-explorer dev` - runs dev server on port 8088
 
-When `connect-exporer` is run locally, WebUSB is disabled because [@trezor/connect-popup](../connect-popup) runs on a different domain and Chrome does not allow `navigator.usb.requestDevice` calls between cross-site elements since v72. Further investigation needed to see if we can fix that. Until then, run [Bridge](https://suite.trezor.io/web/bridge/) to connect to Trezor.
+When `connect-explorer` is run locally, WebUSB is disabled because [@trezor/connect-popup](../connect-popup) runs on a different domain and Chrome does not allow `navigator.usb.requestDevice` calls between cross-site elements since v72. Further investigation needed to see if we can fix that. Until then, run [Bridge](https://suite.trezor.io/web/bridge/) to connect to Trezor.
 
 Alternatively, use the [online explorer](https://trezor.github.io/trezor-suite/connect-explorer), which is pointing to the latest stable version of [@trezor/connect](../connect).
 
diff --git a/packages/connect-popup/package.json b/packages/connect-popup/package.json
index e841559c88d4..1caaa1654fbc 100644
--- a/packages/connect-popup/package.json
+++ b/packages/connect-popup/package.json
@@ -13,12 +13,10 @@
         "@trezor/components": "*",
         "@trezor/connect": "9.0.0",
         "@trezor/connect-ui": "*",
-        "@trezor/urls": "*",
-        "react": "17.0.2",
-        "styled-components": "^5.3.5"
+        "@trezor/urls": "*"
     },
     "devDependencies": {
-        "@types/react": "^17.0.0",
+        "@types/react": "17.0.2",
         "@types/styled-components": "^5.1.25",
         "jest": "^26.6.3",
         "rimraf": "^3.0.2",
@@ -26,5 +24,9 @@
         "webpack": "^5.73.0",
         "webpack-cli": "^4.10.0",
         "webpack-dev-server": "^4.7.4"
+    },
+    "peerDependencies": {
+        "react": "17.0.2",
+        "styled-components": "^5.3.5"
     }
 }
diff --git a/packages/connect-popup/src/index.tsx b/packages/connect-popup/src/index.tsx
index 1f97d28f3676..0a4759ed4a56 100644
--- a/packages/connect-popup/src/index.tsx
+++ b/packages/connect-popup/src/index.tsx
@@ -1,5 +1,4 @@
 // origin: https://github.com/trezor/connect/blob/develop/src/js/popup/popup.js/
-import React from 'react';
 import {
     POPUP,
     UI_REQUEST,
@@ -12,7 +11,6 @@ import {
     UI,
     createUiResponse,
 } from '@trezor/connect';
-import { Transport, Passphrase, PassphraseOnDevice } from '@trezor/connect-ui';
 
 import * as view from './view';
 import {
@@ -22,6 +20,7 @@ import {
     initMessageChannel,
     postMessageToParent,
     postMessage,
+    renderConnectUI,
 } from './view/common';
 import {
     showFirmwareUpdateNotification,
@@ -85,7 +84,7 @@ const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
             }
             break;
         case UI_REQUEST.TRANSPORT:
-            showView(<Transport />);
+            renderConnectUI(message);
             break;
         case UI_REQUEST.SELECT_DEVICE:
             view.selectDevice(message.payload);
@@ -152,26 +151,23 @@ const handleMessage = (event: MessageEvent<PopupEvent | UiEvent>) => {
             break;
         // comes first
         case UI_REQUEST.REQUEST_PASSPHRASE:
-            showView(
-                <Passphrase
-                    {...message.payload}
-                    onPassphraseSubmit={(value: string, passphraseOnDevice?: boolean) => {
-                        console.log('on psas', value, passphraseOnDevice);
-                        postMessage(
-                            createUiResponse(UI.RECEIVE_PASSPHRASE, {
-                                value,
-                                passphraseOnDevice,
-                                // todo: what is this param?
-                                save: true,
-                            }),
-                        );
-                    }}
-                />,
-            );
+            renderConnectUI({
+                ...message,
+                onPassphraseSubmit: (value: string, passphraseOnDevice?: boolean) => {
+                    postMessage(
+                        createUiResponse(UI.RECEIVE_PASSPHRASE, {
+                            value,
+                            passphraseOnDevice,
+                            // todo: what is this param?
+                            save: true,
+                        }),
+                    );
+                },
+            });
             break;
         // comes when user clicks "enter on device"
         case UI_REQUEST.REQUEST_PASSPHRASE_ON_DEVICE:
-            showView(<PassphraseOnDevice />);
+            renderConnectUI(message);
             break;
         case UI_REQUEST.INVALID_PASSPHRASE:
             view.initInvalidPassphraseView(message.payload);
diff --git a/packages/connect-popup/src/view/common.tsx b/packages/connect-popup/src/view/common.tsx
index 45f32895323b..2b721339231c 100644
--- a/packages/connect-popup/src/view/common.tsx
+++ b/packages/connect-popup/src/view/common.tsx
@@ -4,7 +4,7 @@ import { POPUP, ERRORS, PopupInit, CoreMessage, ConnectSettings } from '@trezor/
 import React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import { ThemeWrapper } from '@trezor/connect-ui';
+import { ConnectUI, ConnectUIProps } from '@trezor/connect-ui';
 import { StyleSheetWrapper } from './react/StylesSheetWrapper';
 
 export const header: HTMLElement = document.getElementsByTagName('header')[0];
@@ -66,8 +66,10 @@ export const clearView = () => {
 
 let reactRenderIn;
 
-// todo: type
-const renderReactView = (component: any) => {
+// todo: ConnectUIProps
+export const renderConnectUI = (props: ConnectUIProps) => {
+    clearView();
+
     const reactSlot = document.getElementById('react');
 
     reactSlot!.style.display = 'flex';
@@ -88,7 +90,7 @@ const renderReactView = (component: any) => {
 
     const Component = (
         <StyleSheetWrapper>
-            <ThemeWrapper>{component}</ThemeWrapper>
+            <ConnectUI {...props} />
         </StyleSheetWrapper>
     );
 
@@ -114,16 +116,9 @@ const renderLegacyView = (className: string) => {
     return container;
 };
 
-export const showView = (component: string | React.ReactElement) => {
+export const showView = (component: string) => {
     clearView();
-
-    // is view available in react?
-    if (typeof component !== 'string') {
-        renderReactView(component);
-    } else {
-        // else continue in the old way
-        return renderLegacyView(component);
-    }
+    return renderLegacyView(component);
 };
 
 export const getIframeElement = () => {
diff --git a/packages/connect-popup/src/view/react/StylesSheetWrapper.tsx b/packages/connect-popup/src/view/react/StylesSheetWrapper.tsx
index 139992e75f61..e9f009adafdd 100644
--- a/packages/connect-popup/src/view/react/StylesSheetWrapper.tsx
+++ b/packages/connect-popup/src/view/react/StylesSheetWrapper.tsx
@@ -12,8 +12,6 @@ export const StyleSheetWrapper = ({ children }: StyleSheetWrapperProps) => {
         console.error('could not find shadow-root to mount react application');
     }
 
-    return (
-        // @ts-expect-error. typings don't like using shadowRoot as target but it works
-        <StyleSheetManager target={styleSlot.shadowRoot!}>{children}</StyleSheetManager>
-    );
+    // @ts-expect-error. typings don't like using shadowRoot as target but it works
+    return <StyleSheetManager target={styleSlot.shadowRoot!}>{children}</StyleSheetManager>;
 };
diff --git a/packages/connect-ui/package.json b/packages/connect-ui/package.json
index 68ca7df58efa..dbbccfeed2ef 100644
--- a/packages/connect-ui/package.json
+++ b/packages/connect-ui/package.json
@@ -12,15 +12,20 @@
     },
     "dependencies": {
         "@trezor/components": "*",
+        "@trezor/connect": "9.0.0",
         "@trezor/dom-utils": "*",
         "@trezor/urls": "*",
         "react": "17.0.2",
-        "styled-components": "^5.3.5"
+        "react-intl": "^6.0.5"
     },
     "devDependencies": {
         "@types/react": "^17.0.0",
         "@types/styled-components": "^5.1.25",
         "jest": "^26.6.3",
         "typescript": "4.7.4"
+    },
+    "peerDependencies": {
+        "react": "17.0.2",
+        "styled-components": "^5.3.5"
     }
 }
diff --git a/packages/connect-ui/src/components/ThemeWrapper.tsx b/packages/connect-ui/src/components/ThemeWrapper.tsx
deleted file mode 100644
index 4b8f1b17fa21..000000000000
--- a/packages/connect-ui/src/components/ThemeWrapper.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-import styled, { ThemeProvider } from 'styled-components';
-
-import { THEME } from '@trezor/components';
-
-const View = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    min-height: 100vh;
-`;
-
-interface ReactWrapperProps {
-    children: React.ReactNode;
-}
-
-export const ThemeWrapper = ({ children }: ReactWrapperProps) => (
-    <ThemeProvider theme={THEME.light}>
-        <View>{children}</View>
-    </ThemeProvider>
-);
diff --git a/packages/connect-ui/src/components/View.tsx b/packages/connect-ui/src/components/View.tsx
index 5c61eaf07534..5ff1ebc8f92d 100644
--- a/packages/connect-ui/src/components/View.tsx
+++ b/packages/connect-ui/src/components/View.tsx
@@ -11,6 +11,15 @@ const Buttons = styled.div`
     margin-top: 8%;
 `;
 
+const Wrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+`;
+
 const Body = styled.div``;
 
 // common. each view should have title and optionally buttons
@@ -33,7 +42,7 @@ type ViewPropsLoose = ViewPropsBase & {
 };
 
 export const View = (props: ViewPropsStrict | ViewPropsLoose) => (
-    <>
+    <Wrapper>
         <H3>{props.title}</H3>
         {'children' in props ? (
             props.children
@@ -44,5 +53,5 @@ export const View = (props: ViewPropsStrict | ViewPropsLoose) => (
             </Body>
         )}
         {props.buttons && <Buttons>{props.buttons}</Buttons>}
-    </>
+    </Wrapper>
 );
diff --git a/packages/connect-ui/src/index.ts b/packages/connect-ui/src/index.ts
deleted file mode 100644
index a7f92c3d4f21..000000000000
--- a/packages/connect-ui/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export * from './views/Transport';
-export * from './views/Passphrase';
-export * from './views/PassphraseOnDevice';
-
-// this export will be removed in the future but it is required now
-// future => connect-ui will have its own entrypoint
-// now => connect-ui does not have its own entrypoint (is used in connect-popup hybrid app)
-export { ThemeWrapper } from './components/ThemeWrapper';
diff --git a/packages/connect-ui/src/index.tsx b/packages/connect-ui/src/index.tsx
new file mode 100644
index 000000000000..8e677c2b94c8
--- /dev/null
+++ b/packages/connect-ui/src/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { UI } from '@trezor/connect';
+
+import { Transport, TransportProps } from './views/Transport';
+import { Passphrase, PassphraseProps } from './views/Passphrase';
+import { PassphraseOnDevice, PassphraseOnDeviceProps } from './views/PassphraseOnDevice';
+
+import { ThemeWrapper } from './support/ThemeWrapper';
+import { IntlWrapper } from './support/IntlWrapper';
+import { ErrorBoundary } from './support/ErrorBoundary';
+
+export type ConnectUIProps = TransportProps | PassphraseProps | PassphraseOnDeviceProps;
+
+export const ConnectUI = (props: ConnectUIProps) => {
+    console.log(props.type);
+
+    const getComponent = () => {
+        switch (props.type) {
+            case UI.TRANSPORT:
+                return <Transport />;
+            case UI.REQUEST_PASSPHRASE:
+                return <Passphrase {...props} />;
+            case UI.REQUEST_PASSPHRASE_ON_DEVICE:
+                return <PassphraseOnDevice {...props} />;
+            default:
+                // @ts-expect-error
+                throw new Error('no such view exists: ' + props.type);
+        }
+    };
+
+    return (
+        <ErrorBoundary>
+            <ThemeWrapper>
+                {/* todo: load translations from somewhere and pass them to intl */}
+                <IntlWrapper>{getComponent()}</IntlWrapper>
+            </ThemeWrapper>
+        </ErrorBoundary>
+    );
+};
diff --git a/packages/connect-ui/src/support/ErrorBoundary.tsx b/packages/connect-ui/src/support/ErrorBoundary.tsx
new file mode 100644
index 000000000000..1f0cdc63baa2
--- /dev/null
+++ b/packages/connect-ui/src/support/ErrorBoundary.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface StateProps {
+    error: Error | null | undefined;
+}
+
+interface Props {}
+
+export class ErrorBoundary extends React.Component<Props, StateProps> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { error: null };
+    }
+
+    componentDidCatch(error: Error | null, _errorInfo: React.ErrorInfo) {
+        this.setState({ error });
+    }
+
+    render() {
+        return this.state.error ? (
+            // render fallback UI
+            <>Something went wrong</>
+        ) : (
+            // when there's not an error, render children untouched
+            this.props.children
+        );
+    }
+}
diff --git a/packages/connect-ui/src/support/IntlWrapper.tsx b/packages/connect-ui/src/support/IntlWrapper.tsx
new file mode 100644
index 000000000000..79b04923cba7
--- /dev/null
+++ b/packages/connect-ui/src/support/IntlWrapper.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { IntlProvider } from 'react-intl';
+
+interface IntlWrapperProps {
+    children: React.ReactNode;
+}
+
+export const IntlWrapper = ({ children }: IntlWrapperProps) => (
+    // todo: so far hardcoded, not implementing real intl yet, so far only code sharing
+    // todo: waiting for https://github.com/trezor/trezor-suite/pull/5647
+    <IntlProvider
+        locale="en"
+        defaultLocale="en"
+        messages={
+            {
+                // TR_ENTER_PASSPHRASE_ON_DEVICE: 'something',
+            }
+        }
+    >
+        {children}
+    </IntlProvider>
+);
diff --git a/packages/connect-ui/src/support/ThemeWrapper.tsx b/packages/connect-ui/src/support/ThemeWrapper.tsx
new file mode 100644
index 000000000000..3a8b3103ef54
--- /dev/null
+++ b/packages/connect-ui/src/support/ThemeWrapper.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { ThemeProvider } from 'styled-components';
+
+import { THEME } from '@trezor/components';
+
+interface ReactWrapperProps {
+    children: React.ReactNode;
+}
+
+export const ThemeWrapper = ({ children }: ReactWrapperProps) => (
+    <ThemeProvider theme={THEME.light}>{children}</ThemeProvider>
+);
diff --git a/packages/connect-ui/src/views/Passphrase.tsx b/packages/connect-ui/src/views/Passphrase.tsx
index 9a9a55fc693c..676a6bb89857 100644
--- a/packages/connect-ui/src/views/Passphrase.tsx
+++ b/packages/connect-ui/src/views/Passphrase.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-
+import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 
+import type { UiEvent } from '@trezor/connect';
 import { variables, PassphraseTypeCard } from '@trezor/components';
-import type { Device } from '@trezor/connect';
 
 import { View } from '../components/View';
 
@@ -11,6 +11,7 @@ const Wrapper = styled.div<{ authConfirmation?: boolean }>`
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 600px;
 
     @media screen and (max-width: ${variables.SCREEN_SIZE.MD}) {
         width: 100%;
@@ -29,16 +30,13 @@ const Divider = styled.div`
     background: ${props => props.theme.STROKE_GREY};
 `;
 
-// todo:
-const Translation = (props: any) => <span>{props.id}</span>;
-
-interface PassphraseProps {
-    device: Device;
+export type PassphraseProps = Extract<UiEvent, { type: 'ui-request_passphrase' }> & {
     onPassphraseSubmit: (value: string, enterOnDevice?: boolean) => void;
-}
+};
 
 export const Passphrase = (props: PassphraseProps) => {
-    const { device, onPassphraseSubmit } = props;
+    const { onPassphraseSubmit } = props;
+    const { device } = props.payload;
     const { features } = device;
 
     const offerPassphraseOnDevice =
@@ -47,25 +45,61 @@ export const Passphrase = (props: PassphraseProps) => {
         features.capabilities.includes('Capability_PassphraseEntry');
 
     return (
-        <View title="Passphrase">
+        <View title="">
             {/* todo: this part could be shared with suite? */}
+            {/* maybe there could be package 'ui-flows' with something between app level logic and simple components? */}
             <Wrapper>
                 <WalletsWrapper>
                     <PassphraseTypeCard
-                        title={<Translation id="TR_NO_PASSPHRASE_WALLET" />}
-                        description={<Translation id="TR_STANDARD_WALLET_DESCRIPTION" />}
-                        submitLabel={<Translation id="TR_ACCESS_STANDARD_WALLET" />}
+                        title={
+                            <FormattedMessage
+                                id="TR_NO_PASSPHRASE_WALLET"
+                                defaultMessage="Standard wallet"
+                            />
+                        }
+                        description={
+                            <FormattedMessage
+                                id="TR_STANDARD_WALLET_DESCRIPTION"
+                                defaultMessage="No passphrase"
+                            />
+                        }
+                        submitLabel={
+                            <FormattedMessage
+                                id="TR_ACCESS_STANDARD_WALLET"
+                                defaultMessage="Access standard wallet"
+                            />
+                        }
                         type="standard"
                         onSubmit={onPassphraseSubmit}
                     />
                     <Divider />
                     <PassphraseTypeCard
-                        title={<Translation id="TR_WALLET_SELECTION_HIDDEN_WALLET" />}
-                        description={<Translation id="TR_HIDDEN_WALLET_DESCRIPTION" />}
-                        submitLabel={<Translation id="TR_WALLET_SELECTION_ACCESS_HIDDEN_WALLET" />}
+                        title={
+                            <FormattedMessage
+                                id="TR_WALLET_SELECTION_HIDDEN_WALLET"
+                                defaultMessage="Hidden wallet"
+                            />
+                        }
+                        description={
+                            <FormattedMessage
+                                id="TR_HIDDEN_WALLET_DESCRIPTION"
+                                defaultMessage="Passphrase is required"
+                            />
+                        }
+                        submitLabel={
+                            <FormattedMessage
+                                id="TR_WALLET_SELECTION_ACCESS_HIDDEN_WALLET"
+                                defaultMessage="Access Hidden wallet"
+                            />
+                        }
                         type="hidden"
                         offerPassphraseOnDevice={offerPassphraseOnDevice}
                         onSubmit={onPassphraseSubmit}
+                        learnMoreTooltipAppendTo={() =>
+                            document
+                                .getElementById('react')
+                                ?.shadowRoot!.getElementById('reactRenderIn')!
+                        }
                     />
                 </WalletsWrapper>
             </Wrapper>
diff --git a/packages/connect-ui/src/views/PassphraseOnDevice.tsx b/packages/connect-ui/src/views/PassphraseOnDevice.tsx
index d466df4b8a78..f2c946960765 100644
--- a/packages/connect-ui/src/views/PassphraseOnDevice.tsx
+++ b/packages/connect-ui/src/views/PassphraseOnDevice.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
+import type { UiEvent } from '@trezor/connect';
 import { Image } from '@trezor/components';
 
 import { View } from '../components/View';
 
+export type PassphraseOnDeviceProps = Extract<UiEvent, { type: 'ui-request_passphrase_on_device' }>;
+
 // todo: maybe follow instructions on device would be enough?
-export const PassphraseOnDevice = () => (
+export const PassphraseOnDevice = (_props: PassphraseOnDeviceProps) => (
     <View title="Passphrase on device" description="e" image={<Image image="MODEL_2" />} />
 );
diff --git a/packages/connect-ui/src/views/Transport.tsx b/packages/connect-ui/src/views/Transport.tsx
index 07c665369488..c7f1801fce27 100644
--- a/packages/connect-ui/src/views/Transport.tsx
+++ b/packages/connect-ui/src/views/Transport.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
 
 import { Button, Link, Image } from '@trezor/components';
+import type { UiEvent } from '@trezor/connect';
 import { SUITE_BRIDGE_URL } from '@trezor/urls';
 
 import { View } from '../components/View';
 import imageSrc from '../images/man_with_laptop.svg';
 
+export type TransportProps = Extract<UiEvent, { type: 'ui-no_transport' }>;
+
 export const Transport = () => (
     <View
         title="Install Bridge"
diff --git a/packages/connect-ui/tsconfig.json b/packages/connect-ui/tsconfig.json
index 63c7ec2ceb9a..1479df60a48e 100644
--- a/packages/connect-ui/tsconfig.json
+++ b/packages/connect-ui/tsconfig.json
@@ -3,6 +3,7 @@
     "compilerOptions": { "outDir": "libDev" },
     "references": [
         { "path": "../components" },
+        { "path": "../connect" },
         { "path": "../dom-utils" },
         { "path": "../urls" }
     ]
diff --git a/packages/connect/src/events/ui-request.ts b/packages/connect/src/events/ui-request.ts
index 4879950646e0..5d7b133c3086 100644
--- a/packages/connect/src/events/ui-request.ts
+++ b/packages/connect/src/events/ui-request.ts
@@ -52,17 +52,35 @@ export const UI_REQUEST = {
     IFRAME_FAILURE: 'ui-iframe_failure',
 } as const;
 
-export interface UiRequestWithoutPayload {
-    type:
-        | typeof UI_REQUEST.LOADING
-        | typeof UI_REQUEST.REQUEST_UI_WINDOW
-        | typeof UI_REQUEST.IFRAME_FAILURE
-        | typeof UI_REQUEST.TRANSPORT
-        | typeof UI_REQUEST.INSUFFICIENT_FUNDS
-        | typeof UI_REQUEST.CLOSE_UI_WINDOW
-        | typeof UI_REQUEST.LOGIN_CHALLENGE_REQUEST;
-    payload?: typeof undefined;
-}
+export type UiRequestWithoutPayload =
+    | {
+          type: typeof UI_REQUEST.LOADING;
+          payload?: typeof undefined;
+      }
+    | {
+          type: typeof UI_REQUEST.REQUEST_UI_WINDOW;
+          payload?: typeof undefined;
+      }
+    | {
+          type: typeof UI_REQUEST.IFRAME_FAILURE;
+          payload?: typeof undefined;
+      }
+    | {
+          type: typeof UI_REQUEST.TRANSPORT;
+          payload?: typeof undefined;
+      }
+    | {
+          type: typeof UI_REQUEST.INSUFFICIENT_FUNDS;
+          payload?: typeof undefined;
+      }
+    | {
+          type: typeof UI_REQUEST.CLOSE_UI_WINDOW;
+          payload?: typeof undefined;
+      }
+    | {
+          type: typeof UI_REQUEST.LOGIN_CHALLENGE_REQUEST;
+          payload?: typeof undefined;
+      };
 
 export type UiRequestDeviceAction =
     | {
@@ -80,17 +98,36 @@ export type UiRequestDeviceAction =
           };
       }
     | {
-          type:
-              | typeof UI_REQUEST.INVALID_PIN
-              | typeof UI_REQUEST.REQUEST_PASSPHRASE_ON_DEVICE
-              | typeof UI_REQUEST.REQUEST_PASSPHRASE
-              | typeof UI_REQUEST.INVALID_PASSPHRASE;
+          type: typeof UI_REQUEST.INVALID_PIN;
+          payload: {
+              device: Device;
+              type?: typeof undefined;
+          };
+      }
+    | {
+          type: typeof UI_REQUEST.REQUEST_PASSPHRASE_ON_DEVICE;
+          payload: {
+              device: Device;
+              type?: typeof undefined;
+          };
+      }
+    | {
+          type: typeof UI_REQUEST.REQUEST_PASSPHRASE;
+          payload: {
+              device: Device;
+              type?: typeof undefined;
+          };
+      }
+    | {
+          type: typeof UI_REQUEST.INVALID_PASSPHRASE;
           payload: {
               device: Device;
               type?: typeof undefined;
           };
       };
 
+// type meow = Extract<UiRequestDeviceAction, { type: 'ui-request_passphrase' }>;
+
 export interface UiRequestButtonData {
     type: 'address';
     serializedPath: string;
diff --git a/packages/suite/src/components/onboarding/Box.tsx b/packages/suite/src/components/onboarding/Box.tsx
index b4298c0258fa..98cbdd16fd31 100644
--- a/packages/suite/src/components/onboarding/Box.tsx
+++ b/packages/suite/src/components/onboarding/Box.tsx
@@ -3,9 +3,8 @@ import styled, { css } from 'styled-components';
 import { motion, Variants } from 'framer-motion';
 import Text from '@onboarding-components/Text';
 import { Translation } from '@suite-components';
-import { H1, variables, Button, Image, useTheme, ImageType } from '@trezor/components';
+import { H1, variables, Button, Image, useTheme, ImageType, motionProps } from '@trezor/components';
 import useMeasure from 'react-use/lib/useMeasure';
-import { transitionEase } from '@suite-config/animation';
 import { useLayoutSize } from '@suite-hooks/useLayoutSize';
 
 const BoxWrapper = styled(
@@ -217,7 +216,7 @@ export const Box = ({
             nested={nested}
             variants={expandable ? wrapperVariants : undefined}
             animate={expanded ? 'expanded' : 'closed'}
-            transition={{ duration: 0.4, ease: transitionEase }}
+            transition={{ duration: 0.4, ease: motionProps.transitionEase }}
             onClick={expandable && !expanded ? onToggle : undefined}
             data-test="@onboarding/box-animated"
             {...rest}
@@ -242,7 +241,7 @@ export const Box = ({
                 <motion.div
                     variants={expandable ? animationVariants : undefined}
                     animate={expanded ? 'expanded' : 'closed'}
-                    transition={{ duration: 0.4, ease: transitionEase }}
+                    transition={{ duration: 0.4, ease: motionProps.transitionEase }}
                 >
                     <div ref={heightRef}>
                         {expandable && expanded && (
diff --git a/packages/suite/src/components/onboarding/ConnectDevicePromptManager/index.tsx b/packages/suite/src/components/onboarding/ConnectDevicePromptManager/index.tsx
index d32cb6b7ee44..f699e89783aa 100644
--- a/packages/suite/src/components/onboarding/ConnectDevicePromptManager/index.tsx
+++ b/packages/suite/src/components/onboarding/ConnectDevicePromptManager/index.tsx
@@ -15,7 +15,7 @@ import { NoTransport } from './components/NoTransport';
 import { NoDeviceDetected } from './components/NoDeviceDetected';
 import { UnexpectedDeviceState } from './components/UnexpectedDeviceState';
 import { motion } from 'framer-motion';
-import { enterEase } from '@suite-config/animation';
+import { motionProps } from '@trezor/components';
 
 const Wrapper = styled.div`
     display: flex;
@@ -87,7 +87,7 @@ export const ConnectDevicePromptManager = ({
             <ContentWrapper
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
-                transition={{ delay: 0.6, duration: 0.5, ease: enterEase }}
+                transition={{ delay: 0.6, duration: 0.5, ease: motionProps.enterEase }}
             >
                 {content ?? children}
             </ContentWrapper>
diff --git a/packages/suite/src/components/suite/CollapsibleBox.tsx b/packages/suite/src/components/suite/CollapsibleBox.tsx
index cbbbb888d68f..547b8b8925c5 100644
--- a/packages/suite/src/components/suite/CollapsibleBox.tsx
+++ b/packages/suite/src/components/suite/CollapsibleBox.tsx
@@ -3,7 +3,7 @@ import styled, { css } from 'styled-components';
 import { motion, Variants } from 'framer-motion';
 import useMeasure from 'react-use/lib/useMeasure';
 import { Icon, variables } from '@trezor/components';
-import { transitionEase } from '@suite-config/animation';
+import { motionProps } from '@trezor/components';
 
 const Wrapper = styled.div<Pick<CollapsibleBoxProps, 'variant'>>`
     display: flex;
@@ -199,7 +199,7 @@ export const CollapsibleBox = ({
                 animate={collapsed ? 'closed' : 'opened'}
                 initial="closed"
                 variants={animationVariants}
-                transition={{ duration: 0.35, ease: transitionEase }}
+                transition={{ duration: 0.35, ease: motionProps.transitionEase }}
                 style={{ overflow: 'hidden' }}
                 data-test="@collapsible-box/body"
             >
diff --git a/packages/suite/src/components/suite/ConnectDevicePrompt.tsx b/packages/suite/src/components/suite/ConnectDevicePrompt.tsx
index 1d9fbaf7798a..12a40b4e727c 100644
--- a/packages/suite/src/components/suite/ConnectDevicePrompt.tsx
+++ b/packages/suite/src/components/suite/ConnectDevicePrompt.tsx
@@ -8,7 +8,7 @@ import { useDevice, useActions } from '@suite-hooks';
 import * as routerActions from '@suite-actions/routerActions';
 import type { PrerequisiteType } from '@suite-types';
 import { motion } from 'framer-motion';
-import { enterEase } from '@suite-config/animation';
+import { motionProps } from '@trezor/components';
 
 const Wrapper = styled(motion.div)`
     display: flex;
@@ -97,7 +97,7 @@ export const ConnectDevicePrompt = ({
         <Wrapper
             initial={{ opacity: 0, y: -50 }}
             animate={{ opacity: 1, y: -0 }}
-            transition={{ delay: 0.2, duration: 0.6, ease: enterEase }}
+            transition={{ delay: 0.2, duration: 0.6, ease: motionProps.enterEase }}
             data-test="@connect-device-prompt"
         >
             <ImageWrapper>
diff --git a/packages/suite/src/components/suite/PrerequisitesGuide/index.tsx b/packages/suite/src/components/suite/PrerequisitesGuide/index.tsx
index a6beb6f499fd..ee8c7cc102f5 100644
--- a/packages/suite/src/components/suite/PrerequisitesGuide/index.tsx
+++ b/packages/suite/src/components/suite/PrerequisitesGuide/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { variables } from '@trezor/components';
+import { variables, motionProps } from '@trezor/components';
 import { ConnectDevicePrompt } from '@suite-components';
 import { isWebUsb } from '@suite-utils/transport';
 import { getStatus, deviceNeedsAttention } from '@suite-utils/device';
@@ -20,7 +20,6 @@ import { DeviceNoFirmware } from './components/DeviceNoFirmware';
 import { DeviceUpdateRequired } from './components/DeviceUpdateRequired';
 import { DeviceDisconnectRequired } from './components/DeviceDisconnectRequired';
 import { motion } from 'framer-motion';
-import { enterEase } from '@suite-config/animation';
 
 const Wrapper = styled.div<{ padded?: boolean }>`
     display: flex;
@@ -116,7 +115,7 @@ export const PrerequisitesGuide = ({
             <TipsContainer
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
-                transition={{ delay: 0.6, duration: 0.5, ease: enterEase }}
+                transition={{ delay: 0.6, duration: 0.5, ease: motionProps.enterEase }}
             >
                 <TipComponent />
             </TipsContainer>
diff --git a/packages/suite/src/components/suite/modals/Passphrase/index.tsx b/packages/suite/src/components/suite/modals/Passphrase/index.tsx
index a66b78c0ae67..dd591f49607f 100644
--- a/packages/suite/src/components/suite/modals/Passphrase/index.tsx
+++ b/packages/suite/src/components/suite/modals/Passphrase/index.tsx
@@ -8,6 +8,7 @@ import * as discoveryActions from '@wallet-actions/discoveryActions';
 import * as deviceUtils from '@suite-utils/device';
 import { Translation, Modal } from '@suite-components';
 import type { TrezorDevice } from '@suite-types';
+import { OpenGuideFromTooltip } from '@guide-components';
 
 const Wrapper = styled.div<{ authConfirmation?: boolean }>`
     display: flex;
@@ -103,6 +104,13 @@ export const Passphrase = ({ device }: Props) => {
                     offerPassphraseOnDevice={onDeviceOffer}
                     onSubmit={onSubmit}
                     singleColModal
+                    learnMoreTooltipOnClick={instance => (
+                        <OpenGuideFromTooltip
+                            dataTest="@tooltip/guideAnchor"
+                            id="/security/passphrase.md"
+                            instance={instance}
+                        />
+                    )}
                 />
             </TinyModal>
         );
@@ -123,6 +131,13 @@ export const Passphrase = ({ device }: Props) => {
                     singleColModal
                     offerPassphraseOnDevice={onDeviceOffer}
                     onSubmit={onSubmit}
+                    learnMoreTooltipOnClick={instance => (
+                        <OpenGuideFromTooltip
+                            dataTest="@tooltip/guideAnchor"
+                            id="/security/passphrase.md"
+                            instance={instance}
+                        />
+                    )}
                 />
             </TinyModal>
         );
@@ -148,6 +163,13 @@ export const Passphrase = ({ device }: Props) => {
                         type="hidden"
                         offerPassphraseOnDevice={onDeviceOffer}
                         onSubmit={onSubmit}
+                        learnMoreTooltipOnClick={instance => (
+                            <OpenGuideFromTooltip
+                                dataTest="@tooltip/guideAnchor"
+                                id="/security/passphrase.md"
+                                instance={instance}
+                            />
+                        )}
                     />
                 </WalletsWrapper>
             </Wrapper>
diff --git a/yarn.lock b/yarn.lock
index b037a31f4aec..1915a7c272cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6531,6 +6531,7 @@ __metadata:
     react: 17.0.2
     react-date-range: ^1.4.0
     react-dom: 17.0.2
+    react-intl: ^6.0.5
     react-select: ^5.4.0
     react-svg: ^15.1.6
     react-truncate: ^2.4.0
@@ -6543,6 +6544,7 @@ __metadata:
     ts-loader: ^9.3.1
     typescript: 4.7.4
     typescript-styled-plugin: ^0.18.2
+    zxcvbn: ^4.4.2
   peerDependencies:
     react: 17.0.2
     styled-components: ^5.3.5
@@ -6651,16 +6653,17 @@ __metadata:
     "@trezor/connect": 9.0.0
     "@trezor/connect-ui": "*"
     "@trezor/urls": "*"
-    "@types/react": ^17.0.0
+    "@types/react": 17.0.2
     "@types/styled-components": ^5.1.25
     jest: ^26.6.3
-    react: 17.0.2
     rimraf: ^3.0.2
-    styled-components: ^5.3.5
     typescript: 4.7.4
     webpack: ^5.73.0
     webpack-cli: ^4.10.0
     webpack-dev-server: ^4.7.4
+  peerDependencies:
+    react: 17.0.2
+    styled-components: ^5.3.5
   languageName: unknown
   linkType: soft
 
@@ -6669,13 +6672,18 @@ __metadata:
   resolution: "@trezor/connect-ui@workspace:packages/connect-ui"
   dependencies:
     "@trezor/components": "*"
+    "@trezor/connect": 9.0.0
+    "@trezor/dom-utils": "*"
     "@trezor/urls": "*"
     "@types/react": ^17.0.0
     "@types/styled-components": ^5.1.25
     jest: ^26.6.3
     react: 17.0.2
-    styled-components: ^5.3.5
+    react-intl: ^6.0.5
     typescript: 4.7.4
+  peerDependencies:
+    react: 17.0.2
+    styled-components: ^5.3.5
   languageName: unknown
   linkType: soft
 
@@ -7184,7 +7192,6 @@ __metadata:
     ua-parser-js: ^1.0.2
     uuid: ^8.3.2
     web3-utils: ^1.7.5
-    zxcvbn: ^4.4.2
   languageName: unknown
   linkType: soft
 
@@ -8316,6 +8323,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:17.0.2":
+  version: 17.0.2
+  resolution: "@types/react@npm:17.0.2"
+  dependencies:
+    "@types/prop-types": "*"
+    csstype: ^3.0.2
+  checksum: a5198857165feddcbfc7d33e3322460ac62b8894d702414496a825b0c82272911ec33a42ef7c9d623a59308070eef4dfee6ff834b0674aa3f87eeb644196ee3b
+  languageName: node
+  linkType: hard
+
 "@types/redux-logger@npm:^3.0.9":
   version: 3.0.9
   resolution: "@types/redux-logger@npm:3.0.9"