Merge pull request #543 from trezor/fix/upgrade-tuc

Upgrade tuc to beta18

package.json

@@ -82,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.15",
+        "trezor-ui-components": "^1.0.0-beta.18",
         "wallet-address-validator": "^0.2.4",
         "web3": "1.0.0-beta.35",
         "webpack": "^4.29.3",

src/actions/DiscoveryActions.js

@@ -175,7 +175,7 @@ const begin = (device: TrezorDevice, networkName: string): AsyncAction => async
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Discovery error',
                 message: error.message,
                 cancelable: true,
@@ -263,7 +263,7 @@ const discoverAccount = (device: TrezorDevice, discoveryProcess: Discovery): Asy
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Account discovery error',
                 message: error.message,
                 cancelable: true,

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,

src/actions/NotificationActions.js

@@ -9,7 +9,7 @@ export type NotificationAction =
     | {
           type: typeof NOTIFICATION.ADD,
           payload: {
-              +type: string,
+              +variant: string,
               +title: React.Node | string,
               +message?: ?(React.Node | string),
               +cancelable: boolean,

src/actions/ReceiveActions.js

@@ -111,7 +111,7 @@ export const showAddress = (path: Array<number>): AsyncAction => async (
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Verifying address error',
                 message: response.payload.error,
                 cancelable: true,

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,

src/actions/SignVerifyActions.js

@@ -64,7 +64,7 @@ const sign = (path: Array<number>, message: string, hex: boolean = false): Async
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Sign error',
                 message: response.payload.error,
                 cancelable: true,
@@ -109,7 +109,7 @@ const verify = (
             dispatch({
                 type: NOTIFICATION.ADD,
                 payload: {
-                    type: 'success',
+                    variant: 'success',
                     title: 'Verify success',
                     message: 'signature is valid',
                     cancelable: true,
@@ -119,7 +119,7 @@ const verify = (
             dispatch({
                 type: NOTIFICATION.ADD,
                 payload: {
-                    type: 'error',
+                    variant: 'error',
                     title: 'Verify error',
                     message: response.payload.error,
                     cancelable: true,

src/actions/TrezorConnectActions.js

@@ -263,7 +263,7 @@ export const authorizeDevice = (): AsyncAction => async (
             type: NOTIFICATION.ADD,
             payload: {
                 devicePath: selected.path,
-                type: 'error',
+                variant: 'error',
                 title: 'Authentication error',
                 message: response.payload.error,
                 cancelable: false,
@@ -350,6 +350,7 @@ export function acquire(): AsyncAction {
                 type: NOTIFICATION.ADD,
                 payload: {
                     type: 'error',
+                    variant: 'error',
                     title: 'Acquire device error',
                     message: response.payload.error,
                     cancelable: true,

src/actions/ethereum/SendFormActions.js

@@ -716,7 +716,7 @@ export const onSend = (): AsyncAction => async (
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Transaction error',
                 message: signedTransaction.payload.error,
                 cancelable: true,
@@ -806,7 +806,7 @@ export const onSend = (): AsyncAction => async (
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'success',
+                variant: 'success',
                 title: 'Transaction success',
                 message: (
                     <Link href={`${network.explorer.tx}${txid}`} isGreen>
@@ -821,7 +821,7 @@ export const onSend = (): AsyncAction => async (
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Transaction error',
                 message: error.message || error,
                 cancelable: true,

src/actions/ripple/SendFormActions.js

@@ -454,7 +454,7 @@ export const onSend = (): AsyncAction => async (
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Transaction error',
                 message: signedTransaction.payload.error,
                 cancelable: true,
@@ -473,7 +473,7 @@ export const onSend = (): AsyncAction => async (
         dispatch({
             type: NOTIFICATION.ADD,
             payload: {
-                type: 'error',
+                variant: 'error',
                 title: 'Transaction error',
                 message: push.payload.error,
                 cancelable: true,
@@ -496,7 +496,7 @@ export const onSend = (): AsyncAction => async (
     dispatch({
         type: NOTIFICATION.ADD,
         payload: {
-            type: 'success',
+            variant: 'success',
             title: 'Transaction success',
             message: txid,
             cancelable: true,

src/components/Header/index.js

@@ -3,6 +3,7 @@
 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';
@@ -40,6 +41,7 @@ const MyHeader = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: MyProps) =>
                 title: <FormattedMessage {...l10nMessages.TR_SUPPORT} />,
             },
         ]}
+        logoLinkComponent={<Link to="/" />}
         rightAddon={<LanguagePicker />}
     />
 );

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;

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>
 );

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 {...l10nMessages.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 />}

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={[

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)}
         />

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

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

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}
         />

src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js

@@ -65,17 +65,17 @@ class Group extends PureComponent {
     };
 
     render() {
-        const { type, groupNotifications, close } = this.props;
+        const { variant, groupNotifications, close } = this.props;
-        const color = getPrimaryColor(type);
+        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>
@@ -93,7 +93,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}
@@ -108,7 +108,7 @@ class Group extends PureComponent {
 }
 
 Group.propTypes = {
-    type: PropTypes.string,
+    variant: PropTypes.string,
     close: PropTypes.func.isRequired,
     groupNotifications: PropTypes.arrayOf(
         PropTypes.shape({

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}
                     />
                 ))}

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."
             />

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,

src/reducers/SelectedAccountReducer.js

@@ -10,7 +10,7 @@ export type Loader = {
 };
 
 export type Notification = {
-    type: string,
+    variant: string,
     title: string,
     message?: string,
 };

src/utils/__tests__/notification.test.js

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

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 };

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>

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

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

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={[

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,

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>

yarn.lock

@@ -11204,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.15:
+trezor-ui-components@^1.0.0-beta.18:
-  version "1.0.0-beta.15"
+  version "1.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/trezor-ui-components/-/trezor-ui-components-1.0.0-beta.15.tgz#936c72b67ed324e5fdac292f50055e8f4ce53290"
+  resolved "https://registry.yarnpkg.com/trezor-ui-components/-/trezor-ui-components-1.0.0-beta.18.tgz#2408dbdedc83e986abcde9d8b2aec3ec37bbdc43"
-  integrity sha512-Vp6iyRcwSfN+zxRlzbZTfmS8xBk/ERpHs16uxof5o05CGppZb6X0rMpWfauOb05k/fMwH8owPWKs1F+D6J2mLQ==
+  integrity sha512-mwS7dqrAUto25ytZpF9K2BQpjTBH78/PJjHVGBoZrLJkONogqOvCCdIbkrUSkNR+ZTep4MoxDF3ZN7SXGsFr+g==
   dependencies:
     "@tippy.js/react" "^2.1.1"
     prop-types "^15.7.2"