Merge branch 'master' into feature/l10n-moar

2024-11-14 04:19:09 +00:00 · 2019-05-03 21:57:58 +02:00 · 2019-05-03 21:57:58 +02:00 · cd0c472aed
commit cd0c472aed
parent f5f233f940 1b9a6e6097
45 changed files with 213 additions and 340 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -3,6 +3,10 @@ image: node:10.15.1
 variables:
  CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"

+before_script:
+  - "apt-get update"
+  - "apt-get install -y build-essential"
+
 cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -9,6 +9,7 @@ __changed__
 - static (without animation) active tab indicator
 - input validation - mandatory leading 0 for float numbers
 - regexps refactored to functions, added unit tests
+- limit passphrase length to 50 bytes

 __removed__
 - Text "already used" from token select in case of already added tokens 
--- a/package.json
+++ b/package.json
@ -33,6 +33,7 @@
    },
    "dependencies": {
        "@babel/polyfill": "^7.2.5",
+        "@hot-loader/react-dom": "16.8.6",
        "bignumber.js": "8.0.2",
        "color-hash": "^1.0.3",
        "commander": "^2.19.0",
@ -81,7 +82,7 @@
        "styled-normalize": "^8.0.6",
        "trezor-bridge-communicator": "1.0.2",
        "trezor-connect": "7.0.2",
-        "trezor-ui-components": "^1.0.0-beta.14",
+        "trezor-ui-components": "^1.0.0-beta.18",
        "wallet-address-validator": "^0.2.4",
        "web3": "1.0.0-beta.35",
        "webpack": "^4.29.3",
--- a/src/actions/DiscoveryActions.js
+++ b/src/actions/DiscoveryActions.js
@ -178,7 +178,7 @@ const begin = (device: TrezorDevice, networkName: string): AsyncAction => async
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_ACCOUNT_DISCOVERY_ERROR} />,
                message: error.message,
                cancelable: true,
@ -266,7 +266,7 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_ACCOUNT_DISCOVERY_ERROR} />,
                message: error.message,
                cancelable: true,
--- a/src/actions/ImportAccountActions.js
+++ b/src/actions/ImportAccountActions.js
@ -80,7 +80,7 @@ export const importAddress = (
            dispatch({
                type: NOTIFICATION.ADD,
                payload: {
-                    type: 'success',
+                    variant: 'success',
                    title: 'The account has been successfully imported',
                    cancelable: true,
                },
@ -132,7 +132,7 @@ export const importAddress = (
            dispatch({
                type: NOTIFICATION.ADD,
                payload: {
-                    type: 'success',
+                    variant: 'success',
                    title: 'The account has been successfully imported',
                    cancelable: true,
                },
@ -147,7 +147,7 @@ export const importAddress = (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: 'Import account error',
                message: error.message,
                cancelable: true,
--- a/src/actions/NotificationActions.js
+++ b/src/actions/NotificationActions.js
@ -16,7 +16,7 @@ export type NotificationAction =
    | {
          type: typeof NOTIFICATION.ADD,
          payload: {
-              +type: string,
+              +variant: string,
              +title: React.Node | MessageDescriptor | string,
              +message?: ?(React.Node | string),
              +cancelable: boolean,
--- a/src/actions/ReceiveActions.js
+++ b/src/actions/ReceiveActions.js
@ -114,7 +114,7 @@ export const showAddress = (path: Array<number>): AsyncAction => async (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_VERIFYING_ADDRESS_ERROR} />,
                message: response.payload.error,
                cancelable: true,
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@ -139,6 +139,7 @@ const getAccountNotification = (
    if (blockchain && !blockchain.connected) {
        return {
            type: 'backend',
+            variant: 'error',
            title: `${network.name} backend is not connected`,
            shouldRender: false,
        };
@ -148,6 +149,7 @@ const getAccountNotification = (
    if (account && discovery && !discovery.completed && !discovery.waitingForDevice) {
        return {
            type: 'info',
+            variant: 'info',
            title: 'Loading other accounts...',
            shouldRender: true,
        };
@ -157,6 +159,7 @@ const getAccountNotification = (
    if (!device.connected) {
        return {
            type: 'info',
+            variant: 'info',
            title: `Device ${device.instanceLabel} is disconnected`,
            shouldRender: true,
        };
@ -167,6 +170,7 @@ const getAccountNotification = (
    if (!device.available) {
        return {
            type: 'info',
+            variant: 'info',
            title: `Device ${device.instanceLabel} is unavailable`,
            message: 'Change passphrase settings to use this device',
            shouldRender: true,
--- a/src/actions/SignVerifyActions.js
+++ b/src/actions/SignVerifyActions.js
@ -67,7 +67,7 @@ const sign = (path: Array<number>, message: string, hex: boolean = false): Async
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_SIGN_MESSAGE_ERROR} />,
                message: response.payload.error,
                cancelable: true,
@ -112,7 +112,7 @@ const verify = (
            dispatch({
                type: NOTIFICATION.ADD,
                payload: {
-                    type: 'success',
+                    variant: 'success',
                    title: <FormattedMessage {...l10nMessages.TR_VERIFY_MESSAGE_SUCCESS} />,
                    message: <FormattedMessage {...l10nMessages.TR_SIGNATURE_IS_VALID} />,
                    cancelable: true,
@ -122,7 +122,7 @@ const verify = (
            dispatch({
                type: NOTIFICATION.ADD,
                payload: {
-                    type: 'error',
+                    variant: 'error',
                    title: <FormattedMessage {...l10nMessages.TR_VERIFY_MESSAGE_ERROR} />,
                    message: response.payload.error,
                    cancelable: true,
--- a/src/actions/TrezorConnectActions.js
+++ b/src/actions/TrezorConnectActions.js
@ -268,7 +268,7 @@ export const authorizeDevice = (): AsyncAction => async (
            type: NOTIFICATION.ADD,
            payload: {
                devicePath: selected.path,
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_AUTHENTICATION_ERROR} />,
                message: response.payload.error,
                cancelable: false,
@ -355,6 +355,7 @@ export function acquire(): AsyncAction {
                type: NOTIFICATION.ADD,
                payload: {
                    type: 'error',
+                    variant: 'error',
                    title: <FormattedMessage {...l10nMessages.TR_ACQUIRE_DEVICE_ERROR} />,
                    message: response.payload.error,
                    cancelable: true,
--- a/src/actions/ethereum/SendFormActions.js
+++ b/src/actions/ethereum/SendFormActions.js
@ -717,7 +717,7 @@ export const onSend = (): AsyncAction => async (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_TRANSACTION_ERROR} />,
                message: signedTransaction.payload.error,
                cancelable: true,
@ -807,7 +807,7 @@ export const onSend = (): AsyncAction => async (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'success',
+                variant: 'success',
                title: <FormattedMessage {...l10nMessages.TR_TRANSACTION_SUCCESS} />,
                message: (
                    <Link href={`${network.explorer.tx}${txid}`} isGreen>
@ -822,7 +822,7 @@ export const onSend = (): AsyncAction => async (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_TRANSACTION_ERROR} />,
                message: error.message || error,
                cancelable: true,
--- a/src/actions/ripple/SendFormActions.js
+++ b/src/actions/ripple/SendFormActions.js
@ -457,7 +457,7 @@ export const onSend = (): AsyncAction => async (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_TRANSACTION_ERROR} />,
                message: signedTransaction.payload.error,
                cancelable: true,
@ -476,7 +476,7 @@ export const onSend = (): AsyncAction => async (
        dispatch({
            type: NOTIFICATION.ADD,
            payload: {
-                type: 'error',
+                variant: 'error',
                title: <FormattedMessage {...l10nMessages.TR_TRANSACTION_ERROR} />,
                message: push.payload.error,
                cancelable: true,
@ -499,7 +499,7 @@ export const onSend = (): AsyncAction => async (
    dispatch({
        type: NOTIFICATION.ADD,
        payload: {
-            type: 'success',
+            variant: 'success',
            title: <FormattedMessage {...l10nMessages.TR_TRANSACTION_SUCCESS} />,
            message: txid,
            cancelable: true,
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@ -1,237 +1,49 @@
 /* eslint-disable jsx-a11y/accessible-emoji */
 /* @flow */
-import React from 'react';
-import styled from 'styled-components';
-import { NavLink } from 'react-router-dom';
-import { SCREEN_SIZE } from 'config/variables';
-import { Icon, icons, colors } from 'trezor-ui-components';
+import * as React from 'react';
+import { Header } from 'trezor-ui-components';
 import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';

 import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
 import l10nMessages from './index.messages';

 import LanguagePicker from './components/LanguagePicker/Container';

-const Wrapper = styled.header`
-    width: 100%;
-    height: 52px;
-    background: ${colors.HEADER};
-    z-index: 200;
-`;
-
-const LayoutWrapper = styled.div`
-    width: 100%;
-    height: 100%;
-    max-width: 1170px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    @media screen and (max-width: 1170px) {
-        padding: 0 25px;
-    }
-`;
-
-const Left = styled.div`
-    display: none;
-    flex: 0 0 33%;
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        display: initial;
-    }
-`;
-
-const MenuToggler = styled.div`
-    display: none;
-    white-space: nowrap;
-    color: ${colors.WHITE};
-    align-self: center;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-    padding: 10px 0px;
-    transition: all 0.1s ease-in;
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        display: flex;
-    }
-`;
-
-const TogglerText = styled.div`
-    margin-left: 6px;
-`;
-
-const TREZOR = styled.div``;
-const T = styled.div``;
-
-const Logo = styled.div`
-    flex: 1;
-    justify-content: flex-start;
-    display: flex;
-
-    ${T} {
-        display: none;
-        width: 20px;
-    }
-
-    ${TREZOR} {
-        width: 100px;
-    }
-
-    svg {
-        fill: ${colors.WHITE};
-        height: 28px;
-    }
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        flex: 1 0 33%;
-        justify-content: center;
-    }
-
-    @media screen and (max-width: ${SCREEN_SIZE.XS}) {
-        /* hides full width trezor logo, shows only trezor icon */
-        ${TREZOR} {
-            display: none;
-        }
-
-        ${T} {
-            display: inherit;
-        }
-    }
-`;
-
-const MenuLinks = styled.div`
-    display: flex;
-    align-content: center;
-    justify-content: flex-end;
-    flex: 0;
-    height: 100%;
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        flex: 0 1 33%;
-    }
-`;
-
-const Projects = styled.div`
-    display: flex;
-    align-items: center;
-    height: 100%;
-    border-right: 1px solid ${colors.HEADER_DIVIDER};
-    padding-right: 24px;
-    margin-right: 24px;
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        display: none;
-    }
-`;
-
-const A = styled.a`
-    color: ${colors.WHITE};
-    margin-left: 24px;
-    transition: all 0.1s ease-in;
-    white-space: nowrap;
-
-    &:visited {
-        color: ${colors.WHITE};
-        margin-left: 24px;
-    }
-
-    &:first-child {
-        margin: 0px;
-    }
-
-    &:hover,
-    &:active {
-        color: ${colors.TEXT_SECONDARY};
-    }
-`;
-
-type Props = {
+type MyProps = {
    sidebarEnabled?: boolean,
    sidebarOpened?: ?boolean,
    toggleSidebar?: toggleSidebarType,
 };

-const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
-    <Wrapper data-test="Main__page__navigation">
-        <LayoutWrapper>
-            <Left>
-                {sidebarEnabled && (
-                    <MenuToggler onClick={toggleSidebar}>
-                        {sidebarOpened ? (
-                            <>
-                                <Icon size={12} color={colors.WHITE} icon={icons.CLOSE} />
-                                <TogglerText>
-                                    <FormattedMessage {...l10nMessages.TR_MENU_CLOSE} />
-                                </TogglerText>
-                            </>
-                        ) : (
-                            <>
-                                <Icon color={colors.WHITE} size={14} icon={icons.MENU} />
-                                <TogglerText>
-                                    <FormattedMessage {...l10nMessages.TR_MENU} />
-                                </TogglerText>
-                            </>
-                        )}
-                    </MenuToggler>
-                )}
-            </Left>
-            <Logo>
-                <NavLink to="/">
-                    <TREZOR>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            x="0px"
-                            y="0px"
-                            viewBox="0 0 163.7 41.9"
-                            width="100%"
-                            height="100%"
-                            preserveAspectRatio="xMinYMin meet"
-                        >
-                            <polygon points="101.1,12.8 118.2,12.8 118.2,17.3 108.9,29.9 118.2,29.9 118.2,35.2 101.1,35.2 101.1,30.7 110.4,18.1 101.1,18.1" />
-                            <path d="M158.8,26.9c2.1-0.8,4.3-2.9,4.3-6.6c0-4.5-3.1-7.4-7.7-7.4h-10.5v22.3h5.8v-7.5h2.2l4.1,7.5h6.7L158.8,26.9z M154.7,22.5 h-4V18h4c1.5,0,2.5,0.9,2.5,2.2C157.2,21.6,156.2,22.5,154.7,22.5z" />
-                            <path d="M130.8,12.5c-6.8,0-11.6,4.9-11.6,11.5s4.9,11.5,11.6,11.5s11.7-4.9,11.7-11.5S137.6,12.5,130.8,12.5z M130.8,30.3 c-3.4,0-5.7-2.6-5.7-6.3c0-3.8,2.3-6.3,5.7-6.3c3.4,0,5.8,2.6,5.8,6.3C136.6,27.7,134.2,30.3,130.8,30.3z" />
-                            <polygon points="82.1,12.8 98.3,12.8 98.3,18 87.9,18 87.9,21.3 98,21.3 98,26.4 87.9,26.4 87.9,30 98.3,30 98.3,35.2 82.1,35.2 " />
-                            <path d="M24.6,9.7C24.6,4.4,20,0,14.4,0S4.2,4.4,4.2,9.7v3.1H0v22.3h0l14.4,6.7l14.4-6.7h0V12.9h-4.2V9.7z M9.4,9.7 c0-2.5,2.2-4.5,5-4.5s5,2,5,4.5v3.1H9.4V9.7z M23,31.5l-8.6,4l-8.6-4V18.1H23V31.5z" />
-                            <path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18 h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z" />
-                            <polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " />
-                        </svg>
-                    </TREZOR>
-                    <T>
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            x="0px"
-                            y="0px"
-                            viewBox="0 0 20 41.9"
-                            width="100%"
-                            height="100%"
-                            preserveAspectRatio="xMinYMin meet"
-                        >
-                            <path d="M24.6,9.7C24.6,4.4,20,0,14.4,0S4.2,4.4,4.2,9.7v3.1H0v22.3h0l14.4,6.7l14.4-6.7h0V12.9h-4.2V9.7z M9.4,9.7 c0-2.5,2.2-4.5,5-4.5s5,2,5,4.5v3.1H9.4V9.7z M23,31.5l-8.6,4l-8.6-4V18.1H23V31.5z" />
-                        </svg>
-                    </T>
-                </NavLink>
-            </Logo>
-            <MenuLinks>
-                <Projects>
-                    <A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">
-                        <FormattedMessage {...l10nMessages.TR_TREZOR} />
-                    </A>
-                    <A href="https://wiki.trezor.io/" target="_blank" rel="noreferrer noopener">
-                        <FormattedMessage {...l10nMessages.TR_WIKI} />
-                    </A>
-                    <A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">
-                        <FormattedMessage {...l10nMessages.TR_BLOG} />
-                    </A>
-                    <A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">
-                        <FormattedMessage {...l10nMessages.TR_SUPPORT} />
-                    </A>
-                </Projects>
-                <LanguagePicker />
-            </MenuLinks>
-        </LayoutWrapper>
-    </Wrapper>
+const MyHeader = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: MyProps) => (
+    <Header
+        sidebarEnabled={sidebarEnabled}
+        sidebarOpened={sidebarOpened}
+        toggleSidebar={toggleSidebar}
+        togglerOpenText={<FormattedMessage {...l10nMessages.TR_MENU} />}
+        togglerCloseText={<FormattedMessage {...l10nMessages.TR_MENU_CLOSE} />}
+        links={[
+            {
+                href: 'https://trezor.io/',
+                title: <FormattedMessage {...l10nMessages.TR_TREZOR} />,
+            },
+            {
+                href: 'https://wiki.trezor.io/',
+                title: <FormattedMessage {...l10nMessages.TR_WIKI} />,
+            },
+            {
+                href: 'https://blog.trezor.io/',
+                title: <FormattedMessage {...l10nMessages.TR_BLOG} />,
+            },
+            {
+                href: 'https://trezor.io/support/',
+                title: <FormattedMessage {...l10nMessages.TR_SUPPORT} />,
+            },
+        ]}
+        logoLinkComponent={<Link to="/" />}
+        rightAddon={<LanguagePicker />}
+    />
 );

-export default Header;
+export default MyHeader;
--- a/src/components/Log/index.js
+++ b/src/components/Log/index.js
@ -28,7 +28,7 @@ type Props = {| ...OwnProps, ...StateProps, ...DispatchProps |};
 const Wrapper = styled.div`
    position: relative;
    color: ${colors.INFO_PRIMARY};
-    background: ${colors.INFO_SECONDARY};
+    background: ${colors.INFO_LIGHT};
    padding: 24px;
    display: flex;
    flex-direction: column;
--- a/src/components/modals/confirm/NoBackup/index.js
+++ b/src/components/modals/confirm/NoBackup/index.js
@ -36,20 +36,6 @@ const BackupButton = styled(Button)`
    margin-bottom: 10px;
 `;

-const ProceedButton = styled(Button)`
-    background: transparent;
-    border-color: ${colors.WARNING_PRIMARY};
-    color: ${colors.WARNING_PRIMARY};
-
-    &:focus,
-    &:hover,
-    &:active {
-        color: ${colors.WHITE};
-        background: ${colors.WARNING_PRIMARY};
-        box-shadow: none;
-    }
-`;
-
 const StyledP = styled(P)`
    /* boost-specificity hack to override P base styling */
    && {
@ -80,9 +66,9 @@ const Confirmation = (props: Props) => (
                    <FormattedMessage {...l10nCommonMessages.TR_CREATE_BACKUP_IN_3_MINUTES} />
                </BackupButton>
            </Link>
-            <ProceedButton isWhite onClick={() => props.onReceiveConfirmation(true)}>
+            <Button isInverse variant="warning" onClick={() => props.onReceiveConfirmation(true)}>
                <FormattedMessage {...l10nCommonMessages.TR_SHOW_ADDRESS_I_WILL_TAKE_THE_RISK} />
-            </ProceedButton>
+            </Button>
        </Row>
    </Wrapper>
 );
--- a/src/components/modals/confirm/UnverifiedAddress/index.js
+++ b/src/components/modals/confirm/UnverifiedAddress/index.js
@ -64,20 +64,6 @@ const BackupButton = styled(Button)`
    width: 100%;
 `;

-const WarnButton = styled(Button)`
-    background: transparent;
-    border-color: ${colors.WARNING_PRIMARY};
-    color: ${colors.WARNING_PRIMARY};
-
-    &:focus,
-    &:hover,
-    &:active {
-        color: ${colors.WHITE};
-        background: ${colors.WARNING_PRIMARY};
-        box-shadow: none;
-    }
-`;
-
 class ConfirmUnverifiedAddress extends PureComponent<Props> {
    componentDidMount(): void {
        this.keyboardHandler = this.keyboardHandler.bind(this);
@ -161,9 +147,13 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
                        <Button onClick={() => (!account ? this.verifyAddress() : 'false')}>
                            <FormattedMessage {...l10nCommonMessages.TR_TRY_AGAIN} />
                        </Button>
-                        <WarnButton isWhite onClick={() => this.showUnverifiedAddress()}>
+                        <Button
+                            isInverse
+                            variant="warning"
+                            onClick={() => this.showUnverifiedAddress()}
+                        >
                            <FormattedMessage {...l10nMessages.TR_SHOW_UNVERIFIED_ADDRESS} />
-                        </WarnButton>
+                        </Button>
                    </Row>
                </Content>
                {needsBackup && <Divider />}
--- a/src/components/modals/passphrase/Passphrase/index.js
+++ b/src/components/modals/passphrase/Passphrase/index.js
@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { byteLength } from 'utils/formatUtils';
 import { FormattedMessage } from 'react-intl';
 import { Button, Input, Checkbox, P, H5, colors } from 'trezor-ui-components';
 import { FONT_SIZE } from 'config/variables';
@ -24,6 +25,7 @@ type State = {
    passphraseCheckInputValue: string,
    doPassphraseInputsMatch: boolean,
    isPassphraseHidden: boolean,
+    byteLength: number,
 };

 const Wrapper = styled.div`
@ -91,6 +93,7 @@ class Passphrase extends PureComponent<Props, State> {
            passphraseCheckInputValue: '',
            doPassphraseInputsMatch: true,
            isPassphraseHidden: true,
+            byteLength: 0,
        };
    }

@ -117,6 +120,9 @@ class Passphrase extends PureComponent<Props, State> {

            let doPassphraseInputsMatch = false;
            if (inputName === 'passphraseInputValue') {
+                this.setState({
+                    byteLength: byteLength(inputValue),
+                });
                // If passphrase is not hidden the second input should get filled automatically
                // and should be disabled
                if (this.state.isPassphraseHidden) {
@ -181,13 +187,28 @@ class Passphrase extends PureComponent<Props, State> {
    handleKeyPress(event: KeyboardEvent) {
        if (event.key === 'Enter') {
            event.preventDefault();
-            if (this.state.doPassphraseInputsMatch) {
+            if (this.state.doPassphraseInputsMatch && this.state.byteLength <= 50) {
                this.submitPassphrase();
            }
        }
    }

    render() {
+        let error = null;
+        if (this.state.byteLength > 50) {
+            error = (
+                <PassphraseError>
+                    <FormattedMessage {...l10nMessages.TR_PASSPHRASE_IS_TOO_LONG} />
+                </PassphraseError>
+            );
+        } else if (!this.state.doPassphraseInputsMatch) {
+            error = (
+                <PassphraseError>
+                    <FormattedMessage {...l10nMessages.TR_PASSPHRASES_DO_NOT_MATCH} />
+                </PassphraseError>
+            );
+        }
+
        return (
            <Wrapper>
                <H5>
@ -236,11 +257,7 @@ class Passphrase extends PureComponent<Props, State> {
                        />
                    </Row>
                )}
-                {!this.state.doPassphraseInputsMatch && (
-                    <PassphraseError>
-                        <FormattedMessage {...l10nMessages.TR_PASSPHRASES_DO_NOT_MATCH} />
-                    </PassphraseError>
-                )}
+                {error}
                <Row>
                    <Checkbox
                        isChecked={!this.state.isPassphraseHidden}
@ -250,10 +267,7 @@ class Passphrase extends PureComponent<Props, State> {
                    </Checkbox>
                </Row>
                <Row>
-                    <Button
-                        isDisabled={!this.state.doPassphraseInputsMatch}
-                        onClick={() => this.submitPassphrase()}
-                    >
+                    <Button isDisabled={!!error} onClick={() => this.submitPassphrase()}>
                        <FormattedMessage {...l10nMessages.TR_ENTER} />
                    </Button>
                </Row>
--- a/src/components/modals/passphrase/Passphrase/index.messages.js
+++ b/src/components/modals/passphrase/Passphrase/index.messages.js
@ -24,6 +24,10 @@ const definedMessages: Messages = defineMessages({
        id: 'TR_PASSPHRASES_DO_NOT_MATCH',
        defaultMessage: 'Passphrases do not match!',
    },
+    TR_PASSPHRASE_IS_TOO_LONG: {
+        id: 'TR_PASSPHRASE_IS_TOO_LONG',
+        defaultMessage: 'Passphrase is too long!',
+    },
    TR_SHOW_PASSPHRASE: {
        id: 'TR_SHOW_PASSPHRASE',
        defaultMessage: 'Show passphrase',
--- a/src/components/modals/pin/Pin/index.js
+++ b/src/components/modals/pin/Pin/index.js
@ -23,12 +23,12 @@ type State = {

 const Wrapper = styled.div`
    padding: 30px 48px;
+    max-width: 260px;
 `;

 const InputWrapper = styled.div`
    margin-top: 24px;
    margin-bottom: 10px;
-    max-width: 260px;
 `;
 const PinRow = styled.div`
    display: flex;
--- a/src/components/notifications/App/components/NoBackup/index.js
+++ b/src/components/notifications/App/components/NoBackup/index.js
@ -13,7 +13,7 @@ export default (props: Props) => {
    return (
        <Notification
            key="no-backup"
-            type="warning"
+            variant="warning"
            title={<FormattedMessage {...l10nCommonMessages.TR_YOUR_TREZOR_IS_NOT_BACKED_UP} />}
            message={<FormattedMessage {...l10nCommonMessages.TR_IF_YOUR_DEVICE_IS_EVER_LOST} />}
            actions={[
--- a/src/components/notifications/App/components/OnlineStatus/index.js
+++ b/src/components/notifications/App/components/OnlineStatus/index.js
@ -11,7 +11,7 @@ export default (props: Props) => {
    return (
        <Notification
            key="wallet-offline"
-            type="error"
+            variant="error"
            title={props.intl.formatMessage(l10nMessages.TR_YOU_WERE_DISCONNECTED_DOT)}
            message={props.intl.formatMessage(l10nMessages.TR_PLEASE_RELOAD_THE_PAGE_DOT)}
        />
--- a/src/components/notifications/App/components/UpdateBridge/index.js
+++ b/src/components/notifications/App/components/UpdateBridge/index.js
@ -11,7 +11,7 @@ export default (props: Props) => {
        return (
            <Notification
                key="update-bridge"
-                type="warning"
+                variant="warning"
                title={props.intl.formatMessage(l10nMessages.TR_NEW_TREZOR_BRIDGE_IS_AVAILABLE)}
                message={props.intl.formatMessage(
                    l10nCommonMessages.TR_UPGRADE_FOR_THE_NEWEST_FEATURES_DOT
--- a/src/components/notifications/App/components/UpdateFirmware/index.js
+++ b/src/components/notifications/App/components/UpdateFirmware/index.js
@ -28,7 +28,7 @@ const UpdateFirmware = (props: {| ...Props, ...ContextRouter |}) => {
    return (
        <Notification
            key="update-firmware"
-            type="warning"
+            variant="warning"
            title={props.intl.formatMessage(l10nMessages.TR_NEW_TREZOR_FIRMWARE_IS_AVAILABLE_DOT)}
            message={props.intl.formatMessage(
                l10nCommonMessages.TR_UPGRADE_FOR_THE_NEWEST_FEATURES_DOT
--- a/src/components/notifications/Context/components/Account/index.js
+++ b/src/components/notifications/Context/components/Account/index.js
@ -16,7 +16,7 @@ export default (props: Props) => {
        // TODO: this is a different component with "auto resolve" button
        return (
            <Notification
-                type="error"
+                variant="error"
                title={notification.title}
                message={notification.message}
                isActionInProgress={blockchain && blockchain.connecting}
@ -33,7 +33,7 @@ export default (props: Props) => {
    }
    return (
        <Notification
-            type={notification.type}
+            variant={notification.variant}
            title={notification.title}
            message={notification.message}
        />
--- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js
+++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js
@ -77,17 +77,17 @@ class Group extends PureComponent {
    };

    render() {
-        const { type, groupNotifications, close } = this.props;
-        const color = getPrimaryColor(type);
+        const { variant, groupNotifications, close } = this.props;
+        const color = getPrimaryColor(variant);
        return (
            <Wrapper>
                {groupNotifications.length > 1 && (
                    <Header onClick={this.toggle}>
                        <Left>
-                            <StyledIcon color={color} size={16} icon={getIcon(type)} />
+                            <StyledIcon color={color} size={16} icon={getIcon(variant)} />
                            <Title color={color}>
                                {groupNotifications.length}{' '}
-                                {groupNotifications.length > 1 ? `${type}s` : type}
+                                {groupNotifications.length > 1 ? `${variant}s` : variant}
                            </Title>
                        </Left>
                        <Right>
@ -105,7 +105,7 @@ class Group extends PureComponent {
                    {groupNotifications.slice(0, this.state.visibleCount).map(notification => (
                        <StyledNotification
                            key={notification.key}
-                            type={notification.type}
+                            variant={notification.variant}
                            title={notification.title}
                            message={notification.message}
                            cancelable={notification.cancelable}
@ -120,7 +120,7 @@ class Group extends PureComponent {
 }

 Group.propTypes = {
-    type: PropTypes.string,
+    variant: PropTypes.string,
    close: PropTypes.func.isRequired,
    groupNotifications: PropTypes.arrayOf(
        PropTypes.shape({
--- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js
+++ b/src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js
@ -11,7 +11,7 @@ const Wrapper = styled.div`
 class NotificationsGroup extends PureComponent {
    groupNotifications = notifications =>
        notifications.reduce((acc, obj) => {
-            const key = obj.type;
+            const key = obj.variant;
            if (!acc[key]) {
                acc[key] = [];
            }
@ -20,6 +20,7 @@ class NotificationsGroup extends PureComponent {
        }, {});

    sortByPriority(notifications) {
+        //TODO
        return notifications;
    }

@ -29,51 +30,53 @@ class NotificationsGroup extends PureComponent {
        //     {
        //         key: 1,
        //         title: 'this is a title of error notification',
-        //         type: 'error',
+        //         variant: 'error',
        //         message: 'this is a message of error notification',
        //     },
        //     {
        //         key: 2,
        //         title: 'this is a title of warning notification',
-        //         type: 'warning',
+        //         variant: 'warning',
        //         message: 'this is a message of warning notification',
        //     },
        //     {
        //         key: 3,
        //         title: 'this is a title of warning notification',
-        //         type: 'warning',
+        //         variant: 'warning',
        //         message: 'this is a message of warning notification',
        //     },
        //     {
        //         key: 4,
        //         title: 'this is a title of warning notification sds d',
-        //         type: 'warning',
+        //         variant: 'warning',
        //         message: 'this is a message of warning notification',
        //     },
        //     {
        //         key: 5,
        //         title: 'this is a title of warning notification as',
-        //         type: 'success',
+        //         variant: 'success',
        //     },
        //     {
        //         key: 6,
        //         title: 'this is a title of warning notification as',
-        //         type: 'info',
+        //         variant: 'info',
        //         message: 'this is a message of warning notification',
        //     },
        //     {
        //         key: 7,
        //         title: 'this is a title of info notification s ',
-        //         type: 'info',
+        //         variant: 'info',
        //         message: 'this is a message of info notification',
-        //         actions:
-        //             [{
+        //         actions: [
+        //             {
        //                 label: 'Update',
        //                 callback: 'props.routerActions.gotoBridgeUpdate',
-        //             }],
+        //             },
+        //         ],
        //     },
        // ];
        const notificationGroups = this.groupNotifications(notifications);
+        console.log(notificationGroups);
        const sortedNotifications = this.sortByPriority(notificationGroups);

        return (
@ -82,7 +85,7 @@ class NotificationsGroup extends PureComponent {
                    <Group
                        key={group}
                        groupNotifications={notificationGroups[group]}
-                        type={group}
+                        variant={group}
                        close={close}
                    />
                ))}
--- a/src/components/notifications/Context/components/Static/index.js
+++ b/src/components/notifications/Context/components/Static/index.js
@ -30,7 +30,7 @@ export default withRouter<Props>((props: {| ...Props, ...ContextRouter |}) => {
            notifications.push(
                <Notification
                    key="xrp-warning"
-                    type="warning"
+                    variant="warning"
                    title={
                        <FormattedMessage {...l10nMessages.TR_MINIMUM_ACCOUNT_RESERVE_REQUIRED} />
                    }
@ -61,7 +61,7 @@ export default withRouter<Props>((props: {| ...Props, ...ContextRouter |}) => {
        notifications.push(
            <Notification
                key="import-warning"
-                type="warning"
+                variant="warning"
                title="Use at your own risk"
                message="This is an advanced interface intended for developer use only. Never use this process unless you really know what you are doing."
            />
@ -72,7 +72,7 @@ export default withRouter<Props>((props: {| ...Props, ...ContextRouter |}) => {
        notifications.push(
            <Notification
                key="watch-only-info"
-                type="info"
+                variant="info"
                title="The account is watch-only"
                message="A watch-only account is a public address you’ve imported into your wallet, allowing the wallet to watch for outputs but not spend them."
            />
--- a/src/reducers/NotificationReducer.js
+++ b/src/reducers/NotificationReducer.js
@ -16,7 +16,7 @@ export type NotificationEntry = {
    +key: string, // React.Key
    +id: ?string,
    +devicePath: ?string,
-    +type: string,
+    +variant: string,
    +title: React.Node | string,
    +message: ?(React.Node | string),
    +cancelable: boolean,
@ -42,7 +42,7 @@ const addNotification = (state: State, payload: any): State => {
        key: new Date().getTime().toString(),
        id: payload.id,
        devicePath: payload.devicePath,
-        type: payload.type,
+        variant: payload.variant,
        title: payload.title,
        message: payload.message,
        cancelable: payload.cancelable,
--- a/src/reducers/SelectedAccountReducer.js
+++ b/src/reducers/SelectedAccountReducer.js
@ -10,7 +10,7 @@ export type Loader = {
 };

 export type Notification = {
-    type: string,
+    variant: string,
    title: string,
    message?: string,
 };
--- a/src/store.js
+++ b/src/store.js
@ -20,8 +20,8 @@ const enhancers = [];

 const middlewares = [thunk, routerMiddleware(history)];

-// sentry io middleware only in dev and beta build
-if (buildUtils.isDev() || buildUtils.isBeta()) {
+// sentry io middleware only in beta build
+if (buildUtils.isBeta()) {
    const RAVEN_KEY = 'https://34b8c09deb6c4cd2a4dc3f0029cd02d8@sentry.io/1279550';
    const ravenMiddleware = RavenMiddleware(RAVEN_KEY);
    Raven.config(RAVEN_KEY).install();
--- a/src/utils/tests/formatUtils.test.js
+++ b/src/utils/tests/formatUtils.test.js
@ -21,4 +21,14 @@ describe('format utils', () => {
        expect(utils.fromDecimalAmount('a', 'a')).toBe('0');
        expect(utils.fromDecimalAmount('a', '1')).toBe('0');
    });
+
+    describe('byteLength', () => {
+        it('should return correct byte length for strings with special ASCII characters', () => {
+            expect(utils.byteLength('testString')).toEqual(10);
+            expect(utils.byteLength('~!@#$%^&*()_+{}|:?><')).toEqual(20);
+            expect(utils.byteLength('😀')).toEqual(4);
+            expect(utils.byteLength('ä')).toEqual(2);
+            expect(utils.byteLength('áľščť')).toEqual(10);
+        });
+    });
 });
--- a/src/utils/tests/notification.test.js
+++ b/src/utils/tests/notification.test.js
@ -11,13 +11,13 @@ describe('notification utils', () => {
        expect(utils.getPrimaryColor('')).toBe(null);
    });

-    it('get secondary color from status', () => {
-        expect(utils.getSecondaryColor('info')).toBe(colors.INFO_SECONDARY);
-        expect(utils.getSecondaryColor('warning')).toBe(colors.WARNING_SECONDARY);
-        expect(utils.getSecondaryColor('error')).toBe(colors.ERROR_SECONDARY);
-        expect(utils.getSecondaryColor('success')).toBe(colors.SUCCESS_SECONDARY);
-        expect(utils.getSecondaryColor('kdsjflds')).toBe(null);
-        expect(utils.getSecondaryColor('')).toBe(null);
+    it('get notification bg color from status', () => {
+        expect(utils.getNotificationBgColor('info')).toBe(colors.INFO_LIGHT);
+        expect(utils.getNotificationBgColor('warning')).toBe(colors.WARNING_LIGHT);
+        expect(utils.getNotificationBgColor('error')).toBe(colors.ERROR_LIGHT);
+        expect(utils.getNotificationBgColor('success')).toBe(colors.SUCCESS_LIGHT);
+        expect(utils.getNotificationBgColor('kdsjflds')).toBe(null);
+        expect(utils.getNotificationBgColor('')).toBe(null);
    });

    it('get icon according to status', () => {
--- a/src/utils/formatUtils.js
+++ b/src/utils/formatUtils.js
@ -27,3 +27,14 @@ export const fromDecimalAmount = (amount: string | number, decimals: number): st
        return '0';
    }
 };
+
+export const byteLength = (text: string): number => {
+    // returns length of the text in bytes, 0 in case of error.
+    try {
+        // regexp is handling cases when encodeURI returns '%uXXXX' or %XX%XX
+        return encodeURI(text).split(/%(?:u[0-9A-F]{2})?[0-9A-F]{2}|./).length - 1;
+    } catch (error) {
+        console.error(error);
+        return 0;
+    }
+};
--- a/src/utils/notification.js
+++ b/src/utils/notification.js
@ -22,20 +22,20 @@ const getPrimaryColor = type => {
    return color;
 };

-const getSecondaryColor = type => {
+const getNotificationBgColor = type => {
    let color;
    switch (type) {
        case 'info':
-            color = colors.INFO_SECONDARY;
+            color = colors.INFO_LIGHT;
            break;
        case 'error':
-            color = colors.ERROR_SECONDARY;
+            color = colors.ERROR_LIGHT;
            break;
        case 'warning':
-            color = colors.WARNING_SECONDARY;
+            color = colors.WARNING_LIGHT;
            break;
        case 'success':
-            color = colors.SUCCESS_SECONDARY;
+            color = colors.SUCCESS_LIGHT;
            break;
        default:
            color = null;
@ -46,4 +46,4 @@ const getSecondaryColor = type => {

 const getIcon = type => icons[type.toUpperCase()];

-export { getPrimaryColor, getSecondaryColor, getIcon };
+export { getPrimaryColor, getNotificationBgColor, getIcon };
--- a/src/views/Landing/components/InitializationError/index.js
+++ b/src/views/Landing/components/InitializationError/index.js
@ -13,7 +13,7 @@ const InitializationError = (props: { error: string }) => (
        <Notification
            title="Initialization error"
            message={props.error}
-            type="error"
+            variant="error"
            cancelable={false}
        />
    </Wrapper>
--- a/src/views/Wallet/views/Account/Receive/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js
@ -78,7 +78,7 @@ const QrWrapper = styled.div`
 `;

 const StyledDeviceIcon = styled(DeviceIcon)`
-    margin: 0 6px;
+    margin-right: 6px;
 `;

 const AccountReceive = (props: Props) => {
@ -118,7 +118,7 @@ const AccountReceive = (props: Props) => {
                            topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
                            value={address}
                            isPartiallyHidden={isAddressHidden}
-                            trezorAction={
+                            tooltipAction={
                                isAddressVerifying ? (
                                    <React.Fragment>
                                        <StyledDeviceIcon
--- a/src/views/Wallet/views/Account/Receive/ripple/index.js
+++ b/src/views/Wallet/views/Account/Receive/ripple/index.js
@ -84,7 +84,7 @@ const QrWrapper = styled.div`
 `;

 const StyledDeviceIcon = styled(DeviceIcon)`
-    margin: 0 6px;
+    margin-right: 6px;
 `;

 const AccountReceive = (props: Props) => {
@ -124,7 +124,7 @@ const AccountReceive = (props: Props) => {
                            topLabel={props.intl.formatMessage(l10nCommonMessages.TR_ADDRESS)}
                            value={address}
                            isPartiallyHidden={isAddressHidden}
-                            trezorAction={
+                            tooltipAction={
                                isAddressVerifying ? (
                                    <React.Fragment>
                                        <StyledDeviceIcon
--- a/src/views/Wallet/views/Account/Summary/common.messages.js
+++ b/src/views/Wallet/views/Account/Summary/common.messages.js
@ -23,6 +23,10 @@ const definedMessages: Messages = defineMessages({
        id: 'TR_TOKEN_NOT_FOUND',
        defaultMessage: 'Token not found',
    },
+    TR_ALREADY_ADDED: {
+        id: 'TR_ALREADY_ADDED',
+        defaultMessage: 'Already added',
+    },
    TR_HISTORY: {
        id: 'TR_HISTORY',
        defaultMessage: 'History',
--- a/src/views/Wallet/views/Account/Summary/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js
@ -156,7 +156,15 @@ const AccountSummary = (props: Props) => {
                            }
                        }}
                        loadOptions={input => props.loadTokens(input, account.network)}
-                        formatOptionLabel={option => option.name}
+                        formatOptionLabel={option => {
+                            const isAdded = tokens.find(t => t.symbol === option.symbol);
+                            if (isAdded) {
+                                return `${option.name} (${props.intl.formatMessage(
+                                    l10nSummaryMessages.TR_ALREADY_ADDED
+                                )})`;
+                            }
+                            return option.name;
+                        }}
                        getOptionLabel={option => option.name}
                        getOptionValue={option => option.symbol}
                    />
--- a/src/views/Wallet/views/Acquire/index.js
+++ b/src/views/Wallet/views/Acquire/index.js
@ -37,7 +37,7 @@ const Acquire = (props: Props) => (
        <Notification
            title={props.intl.formatMessage(l10nMessages.TR_DEVICE_USED_IN_OTHER)}
            message={props.intl.formatMessage(l10nMessages.TR_USE_YOUR_DEVICE_IN_THIS_WINDOW)}
-            type="info"
+            variant="info"
            cancelable={false}
            isActionInProgress={props.acquiring}
            actions={[
--- a/src/views/Wallet/views/Import/index.js
+++ b/src/views/Wallet/views/Import/index.js
@ -86,6 +86,7 @@ const Import = (props: Props) => {
                        isDisabled={
                            !selectedNetwork || address === '' || props.importAccount.loading
                        }
+                        isLoading={props.importAccount.loading}
                        onClick={() =>
                            props.importAddress(
                                address,
--- a/src/views/Wallet/views/UnreadableDevice/index.js
+++ b/src/views/Wallet/views/UnreadableDevice/index.js
@ -14,7 +14,7 @@ const UnreadableDevice = ({ intl }: { intl: IntlShape }) => (
        <Notification
            title={intl.formatMessage(l10nMessages.TR_UNREADABLE_DEVICE)}
            message={intl.formatMessage(l10nMessages.TR_PLEASE_INSTALL_TREZOR_BRIDGE)}
-            type="error"
+            variant="error"
            cancelable={false}
        />
    </Wrapper>
--- a/translations/master.json
+++ b/translations/master.json
@ -1615,6 +1615,14 @@
      ]
    }
  },
+  "TR_ALREADY_ADDED": {
+    "source": "Already added",
+    "meta": {
+      "occurrences": [
+        "src/views/Wallet/views/Account/Summary/common.messages.js"
+      ]
+    }
+  },
  "TR_HISTORY": {
    "source": "History",
    "meta": {
--- a/webpack/dev.babel.js
+++ b/webpack/dev.babel.js
@ -88,6 +88,7 @@ module.exports = {
        alias: {
            public: PUBLIC,
            react: path.resolve('./node_modules/react'),
+            'react-dom': '@hot-loader/react-dom',
        },
        modules: [SRC, 'node_modules'],
        symlinks: false,
--- a/yarn.lock
+++ b/yarn.lock
@ -858,6 +858,16 @@
  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
  integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==

+"@hot-loader/react-dom@16.8.6":
+  version "16.8.6"
+  resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.8.6.tgz#7923ba27db1563a7cc48d4e0b2879a140df461ea"
+  integrity sha512-+JHIYh33FVglJYZAUtRjfT5qZoT2mueJGNzU5weS2CVw26BgbxGKSujlJhO85BaRbg8sqNWyW1hYBILgK3ZCgA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.13.6"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@ -11194,10 +11204,10 @@ trezor-translations-manager@^1.0.5:
    request "^2.88.0"
    request-promise-native "^1.0.5"

-trezor-ui-components@^1.0.0-beta.14:
-  version "1.0.0-beta.14"
-  resolved "https://registry.yarnpkg.com/trezor-ui-components/-/trezor-ui-components-1.0.0-beta.14.tgz#5d6dd3a8f5e1ace33a03eae7bb6d089ae0866575"
-  integrity sha512-jJ8hMn6Y97lg1a3YMUgQoCosYiPH3L43IJPapAw1c6PSVCPk43QUcbPxtA629Iv32EdCiMlDvANlZgyY9kH98g==
+trezor-ui-components@^1.0.0-beta.18:
+  version "1.0.0-beta.18"
+  resolved "https://registry.yarnpkg.com/trezor-ui-components/-/trezor-ui-components-1.0.0-beta.18.tgz#2408dbdedc83e986abcde9d8b2aec3ec37bbdc43"
+  integrity sha512-mwS7dqrAUto25ytZpF9K2BQpjTBH78/PJjHVGBoZrLJkONogqOvCCdIbkrUSkNR+ZTep4MoxDF3ZN7SXGsFr+g==
  dependencies:
    "@tippy.js/react" "^2.1.1"
    prop-types "^15.7.2"