Merge branch 'master' into fix/beta-disclaimer

src/components/Header/index.js

@@ -75,7 +75,7 @@ const Header = (): React$Element<string> => (
                 </NavLink>
             </Left>
             <Right>
-                <A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">TREZOR</A>
+                <A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">Trezor</A>
                 <A href="https://wiki.trezor.io/" target="_blank" rel="noreferrer noopener">Wiki</A>
                 <A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
                 <A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>

src/components/modals/confirm/Address/index.js

@@ -41,7 +41,7 @@ const ConfirmAddress = (props: Props) => {
     return (
         <Wrapper>
             <Header>
-                <H3>Confirm address on TREZOR</H3>
+                <H3>Confirm address on Trezor</H3>
                 <P>Please compare your address on device with address shown bellow.</P>
             </Header>
             <Content>

src/components/modals/confirm/UnverifiedAddress/index.js

@@ -102,7 +102,7 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
                     <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
                 </StyledLink>
                 <H2>{ deviceStatus }</H2>
-                <StyledP isSmaller>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</StyledP>
+                <StyledP isSmaller>To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process.</StyledP>
                 <Row>
                     <StyledButton onClick={() => (!account ? this.verifyAddress() : 'false')}>Try again</StyledButton>
                     <StyledButton isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</StyledButton>

src/components/modals/device/Forget/index.js

@@ -63,7 +63,7 @@ class ForgetDevice extends PureComponent<Props> {
         return (
             <Wrapper>
                 <H3>Forget { this.props.device.instanceLabel }?</H3>
-                <StyledP isSmaller>Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again.</StyledP>
+                <StyledP isSmaller>Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your Trezor again.</StyledP>
                 <Row>
                     <StyledButton onClick={() => this.forget()}>Forget</StyledButton>
                     <StyledButton isWhite onClick={this.props.onCancel}>Don&apos;t forget</StyledButton>

src/components/modals/device/Remember/index.js

@@ -126,7 +126,7 @@ class RememberDevice extends PureComponent<Props, State> {
         return (
             <Wrapper>
                 <H3>Forget {label}?</H3>
-                <StyledP isSmaller>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
+                <StyledP isSmaller>Would you like Trezor Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
                 <Column>
                     <StyledButton onClick={() => this.forget()}>
                         <ButtonContent>

src/components/modals/external/NemWallet/index.js

@@ -53,7 +53,7 @@ const NemWallet = (props: Props) => (
         </StyledLink>
         <H3>NEM Wallet</H3>
         <P isSmaller>We have partnered up with the NEM Foundation to provide you with a full-fledged NEM Wallet.</P>
-        <H4>Make sure you download the Universal Client for TREZOR support.</H4>
+        <H4>Make sure you download the Universal Client for Trezor support.</H4>
         <Img src={NemImage} />
         <Link href={coins.find(i => i.id === 'xem').url}>
             <StyledButton>Go to nem.io</StyledButton>

src/components/modals/pin/Pin/index.js

@@ -147,7 +147,7 @@ class Pin extends PureComponent<Props, State> {
         return (
             <Wrapper>
                 <H2>Enter { device.label } PIN</H2>
-                <P isSmaller>The PIN layout is displayed on your TREZOR.</P>
+                <P isSmaller>The PIN layout is displayed on your Trezor.</P>
                 <InputRow>
                     <PinInput value={pin} onDeleteClick={() => this.onPinBackspace()} />
                 </InputRow>

src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Ethereum Wallet | TREZOR</title>
+    <title>Ethereum Wallet | Trezor</title>
     <meta name="title" content="Trezor Wallet" />
     <meta name="description" content="Trezor Wallet" />
     <meta name="keywords" content="trezor wallet" />

src/utils/__tests__/__snapshots__/notification.test.js.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`device utils get icon 1`] = `
+Array [
+  "M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM507.904 300.192c27.008 0 48.992 21.984 48.992 49.088 0 27.296-21.984 49.472-48.992 49.472-27.264 0-49.536-22.176-49.536-49.472 0-27.552 21.728-49.088 49.536-49.088zM586.656 660.8c0 10.304-4.96 15.328-15.264 15.328h-126.464c-10.304 0-15.328-5.024-15.328-15.328v-32.256c0-10.304 5.024-15.264 15.328-15.264h23.36v-136.064h-23.872c-10.304 0-15.264-5.024-15.264-15.328v-32.224c0-10.304 4.96-15.264 15.264-15.264h88.288c10.304 0 15.264 4.96 15.264 15.264v183.648h23.424c10.304 0 15.264 4.96 15.264 15.264v32.224z",
+]
+`;
+
+exports[`device utils get icon 2`] = `
+Array [
+  "M693.12 330.88c-46.317-46.267-110.276-74.88-180.919-74.88-141.385 0-256 114.615-256 256s114.615 256 256 256c70.642 0 134.602-28.613 180.921-74.882l-0.002 0.002c46.387-46.337 75.081-110.377 75.081-181.12s-28.694-134.783-75.079-181.118l-0.002-0.002zM494.080 344.32h53.12c16 0 18.24 9.28 18.24 14.72v10.24l-10.88 194.56c0 14.4-8 17.28-18.88 17.28h-28.16c-10.56 0-17.28-2.88-18.88-17.92l-10.88-193.92v-10.56c-1.28-4.8 2.24-14.080 16.32-14.080zM521.28 717.76c-0.095 0.001-0.207 0.001-0.319 0.001-27.747 0-50.24-22.493-50.24-50.24s22.493-50.24 50.24-50.24c27.747 0 50.24 22.493 50.24 50.24 0 0.112 0 0.224-0.001 0.336v-0.017c0 0 0 0.001 0 0.001 0 27.634-22.311 50.057-49.903 50.239h-0.017z",
+]
+`;
+
+exports[`device utils get icon 3`] = `
+Array [
+  "M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z",
+]
+`;
+
+exports[`device utils get icon 4`] = `
+Array [
+  "M692.8 313.92l-1.92-1.92c-6.246-7.057-15.326-11.484-25.44-11.484s-19.194 4.427-25.409 11.448l-0.031 0.036-196.48 224-3.84 1.6-3.84-1.92-48.64-57.28c-7.010-7.905-17.193-12.862-28.533-12.862-21.031 0-38.080 17.049-38.080 38.080 0 7.495 2.165 14.485 5.905 20.377l-0.092-0.155 100.8 148.16c5.391 8.036 14.386 13.292 24.618 13.44h8.662c17.251-0.146 32.385-9.075 41.163-22.529l0.117-0.191 195.2-296.32c4.473-6.632 7.141-14.803 7.141-23.597 0-11.162-4.297-21.32-11.326-28.911l0.025 0.028z",
+]
+`;
+
+exports[`device utils get icon 5`] = `undefined`;
+
+exports[`device utils get icon 6`] = `undefined`;
+
+exports[`device utils get status 1`] = `"#1E7FF0"`;
+
+exports[`device utils get status 2`] = `"#ED1212"`;
+
+exports[`device utils get status 3`] = `"#EB8A00"`;
+
+exports[`device utils get status 4`] = `"#01B757"`;
+
+exports[`device utils get status 5`] = `null`;
+
+exports[`device utils get status 6`] = `null`;

src/utils/__tests__/notification.test.js

@@ -0,0 +1,32 @@
+import * as nUtils from 'utils/notification';
+
+describe('device utils', () => {
+    it('get status', () => {
+        const types = [
+            'info',
+            'error',
+            'warning',
+            'success',
+            'kdsjflds',
+            '',
+        ];
+
+        types.forEach((type) => {
+            expect(nUtils.getColor(type)).toMatchSnapshot();
+        });
+    });
+    it('get icon', () => {
+        const types = [
+            'info',
+            'error',
+            'warning',
+            'success',
+            'kdsjflds',
+            '',
+        ];
+
+        types.forEach((type) => {
+            expect(nUtils.getIcon(type)).toMatchSnapshot();
+        });
+    });
+});

src/views/Landing/components/ConnectDevice/index.js

@@ -108,8 +108,8 @@ class ConnectDevice extends PureComponent<Props> {
             <div>
                 <Title>
                     <H2 claim>The private bank in your hands.</H2>
-                    <P>TREZOR Wallet is an easy-to-use interface for your TREZOR.</P>
+                    <P>Trezor Wallet is an easy-to-use interface for your Trezor.</P>
-                    <P>TREZOR Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>
+                    <P>Trezor Wallet allows you to easily control your funds, manage your balance and initiate transfers.</P>
                 </Title>
 
                 <Wrapper>
@@ -118,7 +118,7 @@ class ConnectDevice extends PureComponent<Props> {
                         {!this.props.showDisconnect && (
                             <React.Fragment>
                                 {this.getTrezorDeviceImage()}
-                                Connect TREZOR
+                                Connect Trezor
                             </React.Fragment>
                         )}
                     </ConnectTrezorWrapper>
@@ -141,13 +141,13 @@ class ConnectDevice extends PureComponent<Props> {
                             <StyledLink
                                 to="/bridge"
                                 isGreen
-                            >Try installing the TREZOR Bridge.
+                            >Try installing the Trezor Bridge.
                             </StyledLink>
                         </P>
                     )}
                     <P>
                         <FooterText>
-                            Don&apos;t have TREZOR?
+                            Don&apos;t have Trezor?
                         </FooterText>
                         <StyledLink
                             href="https://trezor.io/"

src/views/Landing/views/InstallBridge/index.js

@@ -154,8 +154,8 @@ class InstallBridge extends PureComponent<Props, State> {
             <LandingWrapper loading={!target}>
                 <Wrapper>
                     <Top>
-                        <TitleHeader>TREZOR Bridge<Version>{this.state.currentVersion}</Version></TitleHeader>
+                        <TitleHeader>Trezor Bridge<Version>{this.state.currentVersion}</Version></TitleHeader>
-                        <P>New communication tool to facilitate the connection between your TREZOR and your internet browser.</P>
+                        <P>New communication tool to facilitate the connection between your Trezor and your internet browser.</P>
                         <Download>
                             <SelectWrapper
                                 isSearchable={false}

src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js

@@ -1,18 +1,20 @@
 /* @flow */
 
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import colors from 'config/colors';
 import React, { PureComponent } from 'react';
 
 type Props = {
-
+    pathname: string;
+    wrapper: ?HTMLElement;
 }
 
 type State = {
     style: {
         width: number;
         left: number;
-    }
+    },
+    shouldAnimate: boolean,
 }
 
 const Wrapper = styled.div`
@@ -22,7 +24,9 @@ const Wrapper = styled.div`
     width: 100px;
     height: 2px;
     background: ${colors.GREEN_PRIMARY};
-    transition: all 0.3s ease-in-out;
+    ${props => props.animation && css`
+        transition: all 0.3s ease-in-out;
+    `}
 `;
 
 class Indicator extends PureComponent<Props, State> {
@@ -34,52 +38,62 @@ class Indicator extends PureComponent<Props, State> {
                 width: 0,
                 left: 0,
             },
+            shouldAnimate: false,
         };
 
-        this.reposition = this.reposition.bind(this);
+        this.handleResize = this.handleResize.bind(this);
     }
 
     componentDidMount() {
-        this.reposition();
+        window.addEventListener('resize', this.handleResize, false);
-        window.addEventListener('resize', this.reposition, false);
     }
 
-    componentDidUpdate() {
+    componentWillReceiveProps(newProps: Props) {
-        this.reposition();
+        if (this.props.pathname !== newProps.pathname) {
-    }
-
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.reposition, false);
-    }
-
-    reposition() {
-        const tabs = document.querySelector('.account-tabs');
-        if (!tabs) return;
-        const active = tabs.querySelector('.active');
-        if (!active) return;
-        const bounds = active.getBoundingClientRect();
-
-        const left = bounds.left - tabs.getBoundingClientRect().left;
-
-        if (this.state.style.left !== left) {
             this.setState({
-                style: {
+                shouldAnimate: true,
-                    width: bounds.width,
-                    left,
-                },
             });
         }
     }
 
-    reposition: () => void;
+    componentDidUpdate() {
+        this.reposition(false);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize, false);
+    }
 
     handleResize() {
         this.reposition();
     }
 
+    handleResize: () => void;
+
+    reposition(resetAnimation: boolean = true) {
+        if (!this.props.wrapper) return;
+        const { wrapper } = this.props;
+        const active = wrapper.querySelector('.active');
+        if (!active) return;
+        const bounds = active.getBoundingClientRect();
+        const left = bounds.left - wrapper.getBoundingClientRect().left;
+        const { state } = this;
+
+        if (state.style.left !== left) {
+            this.setState({
+                style: {
+                    width: bounds.width,
+                    left,
+                },
+                shouldAnimate: resetAnimation ? false : state.shouldAnimate,
+            });
+        }
+    }
+
     render() {
+        if (!this.props.wrapper) return null;
         return (
-            <Wrapper style={this.state.style} />
+            <Wrapper style={this.state.style} animation={this.state.shouldAnimate} />
         );
     }
 }

src/views/Wallet/components/TopNavigationAccount/index.js

@@ -47,22 +47,28 @@ const StyledNavLink = styled(NavLink)`
     }
 `;
 
+class TopNavigationAccount extends React.PureComponent<Props> {
+    wrapperRefCallback = (element: ?HTMLElement) => {
+        this.wrapper = element;
+    }
 
-const TopNavigationAccount = (props: Props) => {
+    wrapper: ?HTMLElement;
-    const { state, pathname } = props.location;
-    if (!state) return null;
 
-    const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`;
+    render() {
+        const { state, pathname } = this.props.location;
+        if (!state) return null;
 
-    return (
+        const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`;
-        <Wrapper className="account-tabs">
+        return (
-            <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
+            <Wrapper className="account-tabs" innerRef={this.wrapperRefCallback}>
-            <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
+                <StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
-            <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
+                <StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
-            {/* <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink> */}
+                <StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
-            <Indicator pathname={pathname} />
+                {/* <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink> */}
-        </Wrapper>
+                <Indicator pathname={pathname} wrapper={this.wrapper} />
-    );
+            </Wrapper>
-};
+        );
+    }
+}
 
 export default TopNavigationAccount;

src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js

@@ -9,12 +9,12 @@ const VerifyAddressTooltip = ({ isConnected, isAvailable, addressUnverified }) =
     <Wrapper>
         {addressUnverified && (
             <Content>
-                Unverified address. {isConnected && isAvailable ? 'Show on TREZOR' : 'Connect your TREZOR to verify it.'}
+                Unverified address. {isConnected && isAvailable ? 'Show on Trezor' : 'Connect your Trezor to verify it.'}
             </Content>
         )}
         {!addressUnverified && (
             <Content>
-                {isConnected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'}
+                {isConnected ? 'Show on Trezor' : 'Connect your Trezor to verify address.'}
             </Content>
         )}
     </Wrapper>

src/views/Wallet/views/Account/Receive/index.js

@@ -166,7 +166,7 @@ const AccountReceive = (props: Props) => {
                     isShowingQrCode={addressVerified || addressUnverified}
                 >
                     {isAddressVerifying && (
-                        <AddressInfoText>Confirm address on TREZOR</AddressInfoText>
+                        <AddressInfoText>Confirm address on Trezor</AddressInfoText>
                     )}
                     {((addressVerified || addressUnverified) && !isAddressVerifying) && (
                         <Tooltip