1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-14 04:19:09 +00:00

Merge branch 'master' into feature/l10n-moar

This commit is contained in:
slowbackspace 2019-05-03 21:57:58 +02:00
commit cd0c472aed
45 changed files with 213 additions and 340 deletions

View File

@ -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:

View File

@ -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

View File

@ -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",

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

@ -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,

View File

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

View File

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

View File

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

View File

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

View File

@ -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>

View File

@ -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',

View File

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

View File

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

View File

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

View File

@ -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

View File

@ -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

View File

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

View File

@ -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({

View File

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

View File

@ -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 youve imported into your wallet, allowing the wallet to watch for outputs but not spend them."
/>

View File

@ -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,

View File

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

View File

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

View File

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

View File

@ -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', () => {

View File

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

View File

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

View File

@ -13,7 +13,7 @@ const InitializationError = (props: { error: string }) => (
<Notification
title="Initialization error"
message={props.error}
type="error"
variant="error"
cancelable={false}
/>
</Wrapper>

View File

@ -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

View File

@ -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

View File

@ -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',

View File

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

View File

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

View File

@ -86,6 +86,7 @@ const Import = (props: Props) => {
isDisabled={
!selectedNetwork || address === '' || props.importAccount.loading
}
isLoading={props.importAccount.loading}
onClick={() =>
props.importAddress(
address,

View File

@ -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>

View File

@ -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": {

View File

@ -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,

View File

@ -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"