diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 798b9d2b..823701a7 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -75,7 +75,7 @@ const Header = (): React$Element => ( - TREZOR + Trezor Wiki Blog Support diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index 9581561d..05314500 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -41,7 +41,7 @@ const ConfirmAddress = (props: Props) => { return (
-

Confirm address on TREZOR

+

Confirm address on Trezor

Please compare your address on device with address shown bellow.

diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index 992d3325..cb7c7e7b 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -102,7 +102,7 @@ class ConfirmUnverifiedAddress extends PureComponent {

{ deviceStatus }

- To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process. + To prevent phishing attacks, you should verify the address on your Trezor first. { claim } to continue with the verification process. (!account ? this.verifyAddress() : 'false')}>Try again this.showUnverifiedAddress()}>Show unverified address diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js index d20702ca..b0607d4d 100644 --- a/src/components/modals/device/Forget/index.js +++ b/src/components/modals/device/Forget/index.js @@ -63,7 +63,7 @@ class ForgetDevice extends PureComponent { return (

Forget { this.props.device.instanceLabel }?

- 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. + 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. this.forget()}>Forget Don't forget diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js index 937e04bc..38de9115 100644 --- a/src/components/modals/device/Remember/index.js +++ b/src/components/modals/device/Remember/index.js @@ -126,7 +126,7 @@ class RememberDevice extends PureComponent { return (

Forget {label}?

- Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected? + Would you like Trezor Wallet to forget your { devicePlural }, so that it is still visible even while disconnected? this.forget()}> diff --git a/src/components/modals/external/NemWallet/index.js b/src/components/modals/external/NemWallet/index.js index 468fe3a0..74fcefd0 100644 --- a/src/components/modals/external/NemWallet/index.js +++ b/src/components/modals/external/NemWallet/index.js @@ -53,7 +53,7 @@ const NemWallet = (props: Props) => (

NEM Wallet

We have partnered up with the NEM Foundation to provide you with a full-fledged NEM Wallet.

-

Make sure you download the Universal Client for TREZOR support.

+

Make sure you download the Universal Client for Trezor support.

i.id === 'xem').url}> Go to nem.io diff --git a/src/components/modals/pin/Pin/index.js b/src/components/modals/pin/Pin/index.js index 7a8eed98..ed74e834 100644 --- a/src/components/modals/pin/Pin/index.js +++ b/src/components/modals/pin/Pin/index.js @@ -147,7 +147,7 @@ class Pin extends PureComponent { return (

Enter { device.label } PIN

-

The PIN layout is displayed on your TREZOR.

+

The PIN layout is displayed on your Trezor.

this.onPinBackspace()} /> diff --git a/src/index.html b/src/index.html index 348f47f1..7278523f 100644 --- a/src/index.html +++ b/src/index.html @@ -4,7 +4,7 @@ - Ethereum Wallet | TREZOR + Ethereum Wallet | Trezor diff --git a/src/utils/__tests__/__snapshots__/notification.test.js.snap b/src/utils/__tests__/__snapshots__/notification.test.js.snap new file mode 100644 index 00000000..35cabc6c --- /dev/null +++ b/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`; diff --git a/src/utils/__tests__/notification.test.js b/src/utils/__tests__/notification.test.js new file mode 100644 index 00000000..ca4eb5f1 --- /dev/null +++ b/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(); + }); + }); +}); diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js index 83c73cfb..7fb3c21f 100644 --- a/src/views/Landing/components/ConnectDevice/index.js +++ b/src/views/Landing/components/ConnectDevice/index.js @@ -108,8 +108,8 @@ class ConnectDevice extends PureComponent {
<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 allows you to easily control your funds, manage your balance and initiate transfers.</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> @@ -118,7 +118,7 @@ class ConnectDevice extends PureComponent { {!this.props.showDisconnect && ( {this.getTrezorDeviceImage()} - Connect TREZOR + Connect Trezor )} @@ -141,13 +141,13 @@ class ConnectDevice extends PureComponent { Try installing the TREZOR Bridge. + >Try installing the Trezor Bridge.

)}

- Don't have TREZOR? + Don't have Trezor? { - TREZOR Bridge{this.state.currentVersion} -

New communication tool to facilitate the connection between your TREZOR and your internet browser.

+ Trezor Bridge{this.state.currentVersion} +

New communication tool to facilitate the connection between your Trezor and your internet browser.

props.animation && css` + transition: all 0.3s ease-in-out; + `} `; class Indicator extends PureComponent { @@ -34,52 +38,62 @@ class Indicator extends PureComponent { 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.reposition, false); + window.addEventListener('resize', this.handleResize, false); } - componentDidUpdate() { - this.reposition(); - } - - 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) { + componentWillReceiveProps(newProps: Props) { + if (this.props.pathname !== newProps.pathname) { this.setState({ - style: { - width: bounds.width, - left, - }, + shouldAnimate: true, }); } } - 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 ( - + ); } } diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index aef26440..2d0f105e 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/src/views/Wallet/components/TopNavigationAccount/index.js @@ -47,22 +47,28 @@ const StyledNavLink = styled(NavLink)` } `; +class TopNavigationAccount extends React.PureComponent { + wrapperRefCallback = (element: ?HTMLElement) => { + this.wrapper = element; + } -const TopNavigationAccount = (props: Props) => { - const { state, pathname } = props.location; - if (!state) return null; + wrapper: ?HTMLElement; - const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`; + render() { + const { state, pathname } = this.props.location; + if (!state) return null; - return ( - - Summary - Receive - Send - {/* Sign & Verify */} - - - ); -}; + const basePath = `/device/${state.device}/network/${state.network}/account/${state.account}`; + return ( + + Summary + Receive + Send + {/* Sign & Verify */} + + + ); + } +} export default TopNavigationAccount; \ No newline at end of file diff --git a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js index 985eb2d5..b1db5630 100644 --- a/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js +++ b/src/views/Wallet/views/Account/Receive/components/VerifyAddressTooltip/index.js @@ -9,12 +9,12 @@ const VerifyAddressTooltip = ({ isConnected, isAvailable, addressUnverified }) = {addressUnverified && ( - 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.'} )} {!addressUnverified && ( - {isConnected ? 'Show on TREZOR' : 'Connect your TREZOR to verify address.'} + {isConnected ? 'Show on Trezor' : 'Connect your Trezor to verify address.'} )} diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 3f2eb160..0ab6b908 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/src/views/Wallet/views/Account/Receive/index.js @@ -166,7 +166,7 @@ const AccountReceive = (props: Props) => { isShowingQrCode={addressVerified || addressUnverified} > {isAddressVerifying && ( - Confirm address on TREZOR + Confirm address on Trezor )} {((addressVerified || addressUnverified) && !isAddressVerifying) && (