diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js index 3f3a7350..ce10788c 100644 --- a/src/components/DeviceHeader/index.js +++ b/src/components/DeviceHeader/index.js @@ -1,9 +1,9 @@ -// TODO: l10n for device status import React from 'react'; import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import { getStatusColor, getStatusName, getStatus } from 'utils/device'; import { TrezorImage, colors } from 'trezor-ui-components'; +import { injectIntl } from 'react-intl'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; @@ -102,6 +102,7 @@ const DeviceHeader = ({ isSelected = false, className, testId, + intl, }) => { const status = getStatus(device); return ( @@ -123,7 +124,7 @@ const DeviceHeader = ({ {device.instanceLabel} - {getStatusName(status)} + {getStatusName(status, intl)} {icon && !disabled && isAccessible && icon} @@ -141,6 +142,7 @@ DeviceHeader.propTypes = { onClickWrapper: PropTypes.func.isRequired, className: PropTypes.string, testId: PropTypes.string, + intl: PropTypes.any, }; -export default DeviceHeader; +export default injectIntl(DeviceHeader); diff --git a/src/components/DeviceHeader/index.messages.js b/src/components/DeviceHeader/index.messages.js new file mode 100644 index 00000000..dba5b890 --- /dev/null +++ b/src/components/DeviceHeader/index.messages.js @@ -0,0 +1,63 @@ +/* @flow */ +import { defineMessages } from 'react-intl'; +import type { Messages } from 'flowtype/npm/react-intl'; + +const definedMessages: Messages = defineMessages({ + TR_CONNECTED: { + id: 'TR_CONNECTED', + defaultMessage: 'Connected', + description: 'Device status', + }, + TR_CONNECTED_BOOTLOADER: { + id: 'TR_CONNECTED_BOOTLOADER', + defaultMessage: 'Connected (bootloader mode)', + description: 'Device status', + }, + TR_CONNECTED_NOT_INITIALIZED: { + id: 'TR_CONNECTED', + defaultMessage: 'Connected (not initialized)', + description: 'Device status', + }, + TR_CONNECTED_SEEDLESS: { + id: 'TR_CONNECTED_SEEDLESS', + defaultMessage: 'Connected (seedless mode)', + description: 'Device status', + }, + TR_CONNECTED_UPDATE_REQUIRED: { + id: 'TR_CONNECTED_UPDATE_REQUIRED', + defaultMessage: 'Connected (update required)', + description: 'Device status', + }, + TR_CONNECTED_UPDATE_RECOMMENDED: { + id: 'TR_CONNECTED_UPDATE_RECOMMENDED', + defaultMessage: 'Connected (update recommended)', + description: 'Device status', + }, + TR_USED_IN_ANOTHER_WINDOW: { + id: 'TR_USED_IN_ANOTHER_WINDOW', + defaultMessage: 'Used in other window', + description: 'Device status', + }, + TR_UNAVAILABLE: { + id: 'TR_UNAVAILABLE', + defaultMessage: 'Unavailable', + description: 'Device status', + }, + TR_UNREADABLE: { + id: 'TR_UNREADABLE', + defaultMessage: 'Unreadable', + description: 'Device status', + }, + TR_DISCONNECTED: { + id: 'TR_DISCONNECTED', + defaultMessage: 'Disconnected', + description: 'Device status', + }, + TR_STATUS_UNKNOWN: { + id: 'TR_STATUS_UNKNOWN', + defaultMessage: 'Status unknown', + description: 'Device status', + }, +}); + +export default definedMessages; diff --git a/src/utils/__tests__/device.test.js b/src/utils/__tests__/device.test.js index deac57d6..1cbc2c91 100644 --- a/src/utils/__tests__/device.test.js +++ b/src/utils/__tests__/device.test.js @@ -76,15 +76,4 @@ describe('device utils', () => { expect(utils.getStatusColor('disconnected')).toBe(colors.ERROR_PRIMARY); expect(utils.getStatusColor('unavailable')).toBe(colors.ERROR_PRIMARY); }); - - it('get status name', () => { - expect(utils.getStatusName(0)).toBe('Status unknown'); - expect(utils.getStatusName(null)).toBe('Status unknown'); - expect(utils.getStatusName('sdsdsdsd')).toBe('Status unknown'); - expect(utils.getStatusName('used-in-other-window')).toBe('Used in other window'); - expect(utils.getStatusName('connected')).toBe('Connected'); - expect(utils.getStatusName('unacquired')).toBe('Used in other window'); - expect(utils.getStatusName('disconnected')).toBe('Disconnected'); - expect(utils.getStatusName('unavailable')).toBe('Unavailable'); - }); }); diff --git a/src/utils/device.js b/src/utils/device.js index 18b4fef2..b75c20fc 100644 --- a/src/utils/device.js +++ b/src/utils/device.js @@ -1,10 +1,12 @@ /* @flow */ import { colors } from 'trezor-ui-components'; - +import type { IntlShape } from 'react-intl'; import type { Device } from 'trezor-connect'; import type { TrezorDevice, State } from 'flowtype'; +import l10nMessages from 'components/DeviceHeader/index.messages'; + type Transport = $ElementType<$ElementType, 'transport'>; export const getStatus = (device: TrezorDevice): string => { @@ -48,32 +50,44 @@ export const getStatus = (device: TrezorDevice): string => { return 'unknown'; }; -export const getStatusName = (deviceStatus: string): string => { +export const getStatusName = (deviceStatus: string, intl: IntlShape): string => { switch (deviceStatus) { case 'connected': - return 'Connected'; + // return 'Connected'; + return intl.formatMessage(l10nMessages.TR_CONNECTED); case 'disconnected': - return 'Disconnected'; + // return 'Disconnected'; + return intl.formatMessage(l10nMessages.TR_DISCONNECTED); case 'bootloader': - return 'Connected (bootloader mode)'; + // return 'Connected (bootloader mode)'; + return intl.formatMessage(l10nMessages.TR_CONNECTED_BOOTLOADER); case 'initialize': - return 'Connected (not initialized)'; + // return 'Connected (not initialized)'; + return intl.formatMessage(l10nMessages.TR_CONNECTED_NOT_INITIALIZED); case 'seedless': - return 'Connected (seedless mode)'; + // return 'Connected (seedless mode)'; + return intl.formatMessage(l10nMessages.TR_CONNECTED_SEEDLESS); case 'firmware-required': - return 'Connected (update required)'; + // return 'Connected (update required)'; + return intl.formatMessage(l10nMessages.TR_CONNECTED_UPDATE_REQUIRED); case 'firmware-recommended': - return 'Connected (update recommended)'; + // return 'Connected (update recommended)'; + return intl.formatMessage(l10nMessages.TR_CONNECTED_UPDATE_RECOMMENDED); case 'used-in-other-window': - return 'Used in other window'; + // return 'Used in other window'; + return intl.formatMessage(l10nMessages.TR_USED_IN_ANOTHER_WINDOW); case 'unacquired': - return 'Used in other window'; + // return 'Used in other window'; + return intl.formatMessage(l10nMessages.TR_USED_IN_ANOTHER_WINDOW); case 'unavailable': - return 'Unavailable'; + // return 'Unavailable'; + return intl.formatMessage(l10nMessages.TR_UNAVAILABLE); case 'unreadable': - return 'Unreadable'; + // return 'Unreadable'; + return intl.formatMessage(l10nMessages.TR_UNREADABLE); default: - return 'Status unknown'; + // return 'Status unknown'; + return intl.formatMessage(l10nMessages.TR_STATUS_UNKNOWN); } };