replace React.Component by React.PureComponent

src/components/Link/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import { FONT_SIZE, TRANSITION } from 'config/variables';
@@ -45,7 +45,7 @@ const StyledNavLink = styled(NavLink)`
     `}
 `;
 
-class Link extends Component {
+class Link extends PureComponent {
     render() {
         const shouldRenderRouterLink = this.props.to;
         let LinkComponent;

src/components/images/CoinLogo/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
@@ -13,7 +13,7 @@ const Logo = styled.img`
     display: block;
 `;
 
-class CoinLogo extends Component {
+class CoinLogo extends PureComponent {
     constructor() {
         super();
         this.longIcons = ['etc', 'eth', 'trop'];

src/components/inputs/Input/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
@@ -72,7 +72,7 @@ const BottomText = styled.span`
     color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
 `;
 
-class Input extends Component {
+class Input extends PureComponent {
     getIcon(inputState) {
         let icon = [];
         if (inputState === 'success') {

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

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { H2 } from 'components/Heading';
 import P from 'components/Paragraph';
 import styled from 'styled-components';
@@ -36,7 +36,7 @@ const StyledButton = styled(Button)`
     margin: 0 0 10px 0;
 `;
 
-class ConfirmUnverifiedAddress extends Component<Props> {
+class ConfirmUnverifiedAddress extends PureComponent<Props> {
     componentDidMount(): void {
         this.keyboardHandler = this.keyboardHandler.bind(this);
         window.addEventListener('keydown', this.keyboardHandler, false);

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

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
@@ -62,7 +62,7 @@ const ErrorMessage = styled.div`
     width: 100%;
 `;
 
-export default class DuplicateDevice extends Component<Props, State> {
+export default class DuplicateDevice extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
@@ -27,7 +27,7 @@ const Row = styled.div`
     padding: 10px 0;
 `;
 
-class ForgetDevice extends Component<Props> {
+class ForgetDevice extends PureComponent<Props> {
     componentDidMount() {
         this.keyboardHandler = this.keyboardHandler.bind(this);
         window.addEventListener('keydown', this.keyboardHandler, false);

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

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
@@ -47,7 +47,7 @@ const StyledLoader = styled(Loader)`
     left: 200px;
 `;
 
-export default class RememberDevice extends Component<Props, State> {
+export default class RememberDevice extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled, { css } from 'styled-components';
 import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
@@ -64,7 +64,7 @@ const Content = styled.div`
     `}
 `;
 
-class WalletType extends Component<Props> {
+class WalletType extends PureComponent<Props> {
     constructor(props: Props) {
         super(props);
         this.keyboardHandler = this.keyboardHandler.bind(this);

src/components/modals/index.js

@@ -85,7 +85,7 @@ const ModalWindow = styled.div`
     text-align: center;
 `;
 
-class Modal extends React.Component<Props> {
+class Modal extends React.PureComponent<Props> {
     render() {
         if (!this.props.modal.opened) return null;
 

src/components/modals/passphrase/Passphrase/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
 import { FONT_SIZE, TRANSITION } from 'config/variables';
@@ -76,7 +76,7 @@ const LinkButton = styled(Button)`
     }
 `;
 
-class Passphrase extends Component<Props, State> {
+class Passphrase extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 

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

@@ -1,7 +1,7 @@
 /* @flow */
 import P from 'components/Paragraph';
 import { H2 } from 'components/Heading';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import Link from 'components/Link';
 import styled from 'styled-components';
 
@@ -39,7 +39,7 @@ const Footer = styled.div`
     flex-direction: column;
 `;
 
-class Pin extends Component<Props, State> {
+class Pin extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Icon from 'components/Icon';
@@ -32,7 +32,7 @@ const Title = styled.div`
     color: ${props => props.color};
 `;
 
-class Group extends Component {
+class Group extends PureComponent {
     constructor() {
         super();
         this.state = {

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 
@@ -6,7 +6,7 @@ import Group from './components/Group';
 
 const Wrapper = styled.div``;
 
-class NotificationsGroup extends Component {
+class NotificationsGroup extends PureComponent {
     groupNotifications = notifications => notifications
         .reduce((acc, obj) => {
             const key = obj.type;

src/support/ErrorBoundary.js

@@ -1,8 +1,8 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import RedBox from 'redbox-react';
 
-class ErrorBoundary extends Component {
+class ErrorBoundary extends PureComponent {
     constructor(props) {
         super(props);
         this.state = { hasError: false, error: false };

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled, { keyframes } from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import P from 'components/Paragraph';
@@ -14,7 +14,7 @@ type Props = {
     showWebUsb: boolean,
     showDisconnect: boolean,
 };
-class ConnectDevice extends Component<Props> {
+class ConnectDevice extends PureComponent<Props> {
     componentDidMount() {
         if (this.props.showWebUsb) {
             TrezorConnect.renderWebUSBButton();

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

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@@ -118,7 +118,7 @@ const Li = styled.li`
     text-align: justify;
 `;
 
-class InstallBridge extends Component<Props, State> {
+class InstallBridge extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 

src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js

@@ -3,14 +3,14 @@ import coins from 'constants/coins';
 import colors from 'config/colors';
 import ICONS from 'config/icons';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { NavLink } from 'react-router-dom';
 import Divider from '../Divider';
 import RowCoin from '../RowCoin';
 
 const Wrapper = styled.div``;
 
-class CoinMenu extends Component {
+class CoinMenu extends PureComponent {
     getBaseUrl() {
         const { selectedDevice } = this.props.wallet;
         let baseUrl = '';

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import Icon from 'components/Icon';
 import DeviceHeader from 'components/DeviceHeader';
@@ -22,7 +22,7 @@ type Props = {
     forgetDevice: $ElementType<CommonProps, 'forgetDevice'>;
 };
 
-class DeviceList extends Component<Props> {
+class DeviceList extends PureComponent<Props> {
     sortByInstance(a: TrezorDevice, b: TrezorDevice) {
         if (!a.instance || !b.instance) return -1;
         return a.instance > b.instance ? 1 : -1;

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
@@ -27,7 +27,7 @@ const Label = styled.div`
     padding-left: 15px;
 `;
 
-class MenuItems extends Component {
+class MenuItems extends PureComponent {
     onDeviceMenuClick(action, device) {
         if (action === 'reload') {
             this.props.acquireDevice();

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import type { TrezorDevice } from 'flowtype';
@@ -27,7 +27,7 @@ type DeviceMenuItem = {
     label: string;
 }
 
-class DeviceMenu extends Component<Props> {
+class DeviceMenu extends PureComponent<Props> {
     constructor(props: Props) {
         super(props);
         this.mouseDownHandler = this.mouseDownHandler.bind(this);

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

@@ -2,7 +2,7 @@
 
 import styled from 'styled-components';
 import colors from 'config/colors';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
 type Props = {
 
@@ -25,7 +25,7 @@ const Wrapper = styled.div`
     transition: all 0.3s ease-in-out;
 `;
 
-class Indicator extends Component<Props, State> {
+class Indicator extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
 

src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
 import ColorHash from 'color-hash';
@@ -67,7 +67,7 @@ const TransactionAmount = styled.div`
     color: colors.TEXT_SECONDARY;
 `;
 
-class PendingTransactions extends Component<Props> {
+class PendingTransactions extends PureComponent<Props> {
     getPendingTransactions() {
         return this.props.pending.filter(tx => !tx.rejected);
     }

src/views/Wallet/views/Account/Summary/components/Balance/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import BigNumber from 'bignumber.js';
 import styled from 'styled-components';
 import Icon from 'components/Icon';
@@ -88,7 +88,7 @@ const Label = styled.div`
 `;
 
 
-class AccountBalance extends Component<Props, State> {
+class AccountBalance extends PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
         this.state = {

src/views/Wallet/views/Account/Summary/components/Token/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorHash from 'color-hash';
 import ScaleText from 'react-scale-text';
@@ -50,7 +50,7 @@ const RemoveTokenButton = styled(Button)`
     padding: 0 0 0 10px;
 `;
 
-class AddedToken extends Component<> {
+class AddedToken extends PureComponent {
     getTokenBalance(token) {
         const pendingAmount = stateUtils.getPendingAmount(this.props.pending, token.symbol, true);
         const balance = new BigNumber(token.balance).minus(pendingAmount).toString(10);