From 811df82d833f0e91e020ebeb18b8a12f3a3aa488 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Fri, 14 Dec 2018 14:23:41 +0100
Subject: [PATCH 01/23] update changelog

---
 CHANGELOG.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7175fa1f..e3b0bce1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,15 @@
-## feature/ripple
+## 1.1.2-beta
+
+__added__
+- Stellar and Cardano external wallets
+
+# new feature/ripple
 __changed__
 - Split code to coin specific components. actions and reducers
 - Use TrezorConnect to communicate with trezor-blockchain-link
 
 __added__
-- Ripple support
+- Ripple support 
 
 ## 1.0.2-beta
 __changed__

From 2e5d029393d719c70d181b09db9f3cb54730cec5 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Fri, 14 Dec 2018 17:24:45 +0100
Subject: [PATCH 02/23] test sticky build

---
 src/constants/coins.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/constants/coins.js b/src/constants/coins.js
index 13753734..261f4f3e 100644
--- a/src/constants/coins.js
+++ b/src/constants/coins.js
@@ -55,16 +55,16 @@ export default [
         url: 'https://nem.io/downloads/',
         external: true,
     },
-    {
-        id: 'xlm',
-        coinName: 'Stellar',
-        url: 'https://trezor.io/stellar',
-        external: true,
-    },
-    {
-        id: 'ada',
-        coinName: 'Cardano',
-        url: 'https://adalite.io/app',
-        external: true,
-    },
+    // {
+    //     id: 'xlm',
+    //     coinName: 'Stellar',
+    //     url: 'https://trezor.io/stellar',
+    //     external: true,
+    // },
+    // {
+    //     id: 'ada',
+    //     coinName: 'Cardano',
+    //     url: 'https://adalite.io/app',
+    //     external: true,
+    // },
 ];
\ No newline at end of file

From 3a9a214bc246c82a6f1975fab8e41d91452c2786 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Fri, 14 Dec 2018 17:44:18 +0100
Subject: [PATCH 03/23] test sticky build 2

---
 .../components/StickyContainer/index.js        | 18 ++++++++++++------
 .../Wallet/components/LeftNavigation/index.js  |  7 +++++--
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
index ef5ac0b0..dfa4a2f1 100644
--- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
@@ -19,8 +19,11 @@ type State = {
     footerFixed: boolean,
 }
 
-const AsideWrapper = styled.aside`
-    min-height: ${props => props.minHeight}px;
+const AsideWrapper = styled.aside.attrs({
+    style: ({ minHeight }) => ({
+        minHeight,
+    }),
+})`
     position: relative;
     top: 0px;
     width: 320px;
@@ -30,10 +33,13 @@ const AsideWrapper = styled.aside`
     border-right: 1px solid ${colors.DIVIDER};
 `;
 
-const StickyContainerWrapper = styled.div`
-    top: ${props => props.top}px;
-    left: ${props => props.left}px;
-    padding-bottom: ${props => props.paddingBottom}px;
+const StickyContainerWrapper = styled.div.attrs({
+    style: ({ top, left, paddingBottom }) => ({
+        top,
+        left,
+        paddingBottom,
+    }),
+})`
     position: fixed;
     border-right: 1px solid ${colors.DIVIDER};
     width: 320px;
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index d64f559e..1bd89597 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -45,8 +45,11 @@ const TransitionContentWrapper = styled.div`
     vertical-align: top;
 `;
 
-const Footer = styled.div`
-    position: ${props => props.position};
+const Footer = styled.div.attrs({
+    style: ({ position }) => ({
+        position,
+    }),
+})`
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};

From ddf85952fce7f0c05a9281cbe22290488a5bca56 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Fri, 14 Dec 2018 17:49:03 +0100
Subject: [PATCH 04/23] Revert "test sticky build"

This reverts commit 2e5d029393d719c70d181b09db9f3cb54730cec5.
---
 src/constants/coins.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/constants/coins.js b/src/constants/coins.js
index 261f4f3e..13753734 100644
--- a/src/constants/coins.js
+++ b/src/constants/coins.js
@@ -55,16 +55,16 @@ export default [
         url: 'https://nem.io/downloads/',
         external: true,
     },
-    // {
-    //     id: 'xlm',
-    //     coinName: 'Stellar',
-    //     url: 'https://trezor.io/stellar',
-    //     external: true,
-    // },
-    // {
-    //     id: 'ada',
-    //     coinName: 'Cardano',
-    //     url: 'https://adalite.io/app',
-    //     external: true,
-    // },
+    {
+        id: 'xlm',
+        coinName: 'Stellar',
+        url: 'https://trezor.io/stellar',
+        external: true,
+    },
+    {
+        id: 'ada',
+        coinName: 'Cardano',
+        url: 'https://adalite.io/app',
+        external: true,
+    },
 ];
\ No newline at end of file

From 57ad70cd60383f63bab1fbc7f804e1904a9ae363 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 14 Dec 2018 18:59:29 +0100
Subject: [PATCH 05/23] pass className prop to enable component styling

---
 src/components/images/CoinLogo/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/images/CoinLogo/index.js b/src/components/images/CoinLogo/index.js
index adfb85ee..c8d99920 100644
--- a/src/components/images/CoinLogo/index.js
+++ b/src/components/images/CoinLogo/index.js
@@ -28,9 +28,9 @@ class CoinLogo extends PureComponent {
     }
 
     render() {
-        const { network } = this.props;
+        const { network, className } = this.props;
         return (
-            <Wrapper>
+            <Wrapper className={className}>
                 <Logo
                     hasLongIcon={this.hasLongIcon(network)}
                     src={require(`./images/${network}.png`)} // eslint-disable-line
@@ -42,6 +42,7 @@ class CoinLogo extends PureComponent {
 
 CoinLogo.propTypes = {
     network: PropTypes.string,
+    className: PropTypes.string,
 };
 
 export default CoinLogo;

From b13da082e048cacded4a4ac3b84f02039666c8d8 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Fri, 14 Dec 2018 19:01:33 +0100
Subject: [PATCH 06/23] added view for unsupported coins

---
 .../Wallet/views/UnsupportedCoin/index.js     | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/views/Wallet/views/UnsupportedCoin/index.js

diff --git a/src/views/Wallet/views/UnsupportedCoin/index.js b/src/views/Wallet/views/UnsupportedCoin/index.js
new file mode 100644
index 00000000..951753be
--- /dev/null
+++ b/src/views/Wallet/views/UnsupportedCoin/index.js
@@ -0,0 +1,66 @@
+/* @flow */
+import React from 'react';
+import styled from 'styled-components';
+import colors from 'config/colors';
+
+import { FONT_SIZE } from 'config/variables';
+import { H2 } from 'components/Heading';
+import Button from 'components/Button';
+import Link from 'components/Link';
+import CoinLogo from 'components/images/CoinLogo';
+
+
+type Props = {
+    networkShortcut: ?string,
+    title: ?string,
+    message: ?string,
+}
+
+const Wrapper = styled.div`
+    display: flex;
+    background: ${colors.WHITE};
+    flex-direction: column;
+    flex: 1;
+`;
+
+const StyledCoinLogo = styled(CoinLogo)`
+    margin: 10px 0;
+    padding: 0;
+    width: auto;
+`;
+
+const StyledLink = styled(Link)`
+    padding-top: 24px;
+`;
+
+const Row = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Message = styled.div`
+    font-size: ${FONT_SIZE.SMALL};
+    color: ${colors.TEXT_SECONDARY};
+    text-align: center;
+`;
+
+// eslint-disable-next-line arrow-body-style
+const UnsupportedCoin = (props: Props) => {
+    return (
+        <Wrapper>
+            <Row>
+                {props.networkShortcut && <StyledCoinLogo network={props.networkShortcut} />}
+                <H2>{props.title}</H2>
+                <Message>{props.message}</Message>
+                <StyledLink href="https://wiki.trezor.io/">
+                    <Button>Find out more info</Button>
+                </StyledLink>
+            </Row>
+        </Wrapper>
+    );
+};
+
+export default UnsupportedCoin;

From 3566f1b3c58a401b6cdf9ca354e36e208be48ba2 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Sun, 16 Dec 2018 23:46:32 +0100
Subject: [PATCH 07/23] renamed component

---
 .../Content/components/FirmwareUnsupported}/index.js          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename src/views/Wallet/{views/UnsupportedCoin => components/Content/components/FirmwareUnsupported}/index.js (94%)

diff --git a/src/views/Wallet/views/UnsupportedCoin/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
similarity index 94%
rename from src/views/Wallet/views/UnsupportedCoin/index.js
rename to src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
index 951753be..097f004d 100644
--- a/src/views/Wallet/views/UnsupportedCoin/index.js
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
@@ -48,7 +48,7 @@ const Message = styled.div`
 `;
 
 // eslint-disable-next-line arrow-body-style
-const UnsupportedCoin = (props: Props) => {
+const FirmwareUnsupported = (props: Props) => {
     return (
         <Wrapper>
             <Row>
@@ -63,4 +63,4 @@ const UnsupportedCoin = (props: Props) => {
     );
 };
 
-export default UnsupportedCoin;
+export default FirmwareUnsupported;

From 512574ece2169aed6c2c71b30406a99fa7cfa61b Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Sun, 16 Dec 2018 23:49:14 +0100
Subject: [PATCH 08/23] custom loader type when coin is not supported by the
 firmware

---
 src/actions/SelectedAccountActions.js        | 6 +++---
 src/views/Wallet/components/Content/index.js | 6 ++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index 8f7d9445..b2dd5fe9 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -77,9 +77,9 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
 
     if (discovery && discovery.fwNotSupported) {
         return {
-            type: 'info',
-            title: `Device ${device.instanceLabel} is not supported`,
-            message: 'TODO: model T1 not supported explanation',
+            type: 'fwNotSupported',
+            title: `${network.name} is not supported with Trezor ${(device.features || {}).model}`,
+            message: 'Find more information on Trezor Wiki.',
             shouldRender: false,
         };
     }
diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index 229802e9..f5a38ebc 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import Loader from 'components/Loader';
 import { FONT_SIZE } from 'config/variables';
 import colors from 'config/colors';
+import FirmwareUnsupported from './components/FirmwareUnsupported';
 
 const Wrapper = styled.div`
     display: flex;
@@ -41,6 +42,7 @@ const Content = ({
     title,
     message,
     type,
+    networkShortcut,
     isLoading = false,
 }) => (
     <Wrapper>
@@ -54,6 +56,9 @@ const Content = ({
                 {message && <Message>{message}</Message>}
             </Loading>
         )}
+        {isLoading && (type === 'fwNotSupported') && (
+            <FirmwareUnsupported title={title} message={message} networkShortcut={networkShortcut} />
+        )}
     </Wrapper>
 );
 
@@ -63,6 +68,7 @@ Content.propTypes = {
     title: PropTypes.string,
     message: PropTypes.string,
     type: PropTypes.string,
+    networkShortcut: PropTypes.string,
 };
 
 export default Content;

From 800a5be99006c84de56811fcb14e92fe86ccdcc5 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Sun, 16 Dec 2018 23:52:02 +0100
Subject: [PATCH 09/23] pass network.shortcut to Content component

---
 src/views/Wallet/views/Account/Receive/ethereum/index.js | 3 ++-
 src/views/Wallet/views/Account/Receive/ripple/index.js   | 3 ++-
 src/views/Wallet/views/Account/Send/ethereum/index.js    | 2 +-
 src/views/Wallet/views/Account/Send/ripple/index.js      | 2 +-
 src/views/Wallet/views/Account/SignVerify/index.js       | 4 ++--
 src/views/Wallet/views/Account/Summary/ethereum/index.js | 2 +-
 src/views/Wallet/views/Account/Summary/ripple/index.js   | 2 +-
 7 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/views/Wallet/views/Account/Receive/ethereum/index.js b/src/views/Wallet/views/Account/Receive/ethereum/index.js
index 291fbcc8..89340dcc 100644
--- a/src/views/Wallet/views/Account/Receive/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js
@@ -97,9 +97,10 @@ const AccountReceive = (props: Props) => {
         discovery,
         shouldRender,
         loader,
+        network,
     } = props.selectedAccount;
     const { type, title, message } = loader;
-    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
 
     const {
         addressVerified,
diff --git a/src/views/Wallet/views/Account/Receive/ripple/index.js b/src/views/Wallet/views/Account/Receive/ripple/index.js
index 6bc0d7ed..94383077 100644
--- a/src/views/Wallet/views/Account/Receive/ripple/index.js
+++ b/src/views/Wallet/views/Account/Receive/ripple/index.js
@@ -97,9 +97,10 @@ const AccountReceive = (props: Props) => {
         discovery,
         shouldRender,
         loader,
+        network,
     } = props.selectedAccount;
     const { type, title, message } = loader;
-    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
 
     const {
         addressVerified,
diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js
index 5e53d918..f92674eb 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/index.js
@@ -214,7 +214,7 @@ const AccountSend = (props: Props) => {
         onSend,
     } = props.sendFormActions;
     const { type, title, message } = loader;
-    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
 
     const isCurrentCurrencyToken = networkSymbol !== currency;
 
diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js
index 010f9154..7d7caf9e 100644
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/index.js
@@ -143,7 +143,7 @@ const AccountSend = (props: Props) => {
         onSend,
     } = props.sendFormActions;
     const { type, title, message } = loader;
-    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
 
     let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
     let sendButtonText: string = ` ${total} ${network.symbol}`;
diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js
index 96e7e527..fc8d39a0 100644
--- a/src/views/Wallet/views/Account/SignVerify/index.js
+++ b/src/views/Wallet/views/Account/SignVerify/index.js
@@ -57,10 +57,10 @@ class SignVerify extends Component <Props> {
     render() {
         const device = this.props.wallet.selectedDevice;
         const {
-            account, discovery, shouldRender, notification,
+            account, discovery, shouldRender, notification, network,
         } = this.props.selectedAccount;
         const { type, title, message } = notification;
-        if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+        if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
         const {
             signVerifyActions,
             signVerify: {
diff --git a/src/views/Wallet/views/Account/Summary/ethereum/index.js b/src/views/Wallet/views/Account/Summary/ethereum/index.js
index 770fb273..a2ce8d95 100644
--- a/src/views/Wallet/views/Account/Summary/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js
@@ -82,7 +82,7 @@ const AccountSummary = (props: Props) => {
 
     const { type, title, message } = loader;
 
-    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
 
     const explorerLink: string = `${network.explorer.address}${account.address}`;
     const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
diff --git a/src/views/Wallet/views/Account/Summary/ripple/index.js b/src/views/Wallet/views/Account/Summary/ripple/index.js
index 1b97e841..ea0501e1 100644
--- a/src/views/Wallet/views/Account/Summary/ripple/index.js
+++ b/src/views/Wallet/views/Account/Summary/ripple/index.js
@@ -72,7 +72,7 @@ const AccountSummary = (props: Props) => {
 
     const { type, title, message } = loader;
 
-    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
 
     const explorerLink: string = `${network.explorer.address}${account.address}`;
     const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);

From 597f804a9deb0899c789835793922dc0dd053bb2 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 17 Dec 2018 12:52:19 +0100
Subject: [PATCH 10/23] added prop to enable rendering Logo without wrapper

---
 src/components/images/CoinLogo/index.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/images/CoinLogo/index.js b/src/components/images/CoinLogo/index.js
index c8d99920..ae03c897 100644
--- a/src/components/images/CoinLogo/index.js
+++ b/src/components/images/CoinLogo/index.js
@@ -28,13 +28,23 @@ class CoinLogo extends PureComponent {
     }
 
     render() {
-        const { network, className } = this.props;
+        const { network, className, standalone } = this.props;
+
+        const logo = (
+            <Logo
+                className={className}
+                hasLongIcon={this.hasLongIcon(network)}
+                src={require(`./images/${network}.png`)} // eslint-disable-line
+            />
+        );
+
+        if (standalone) {
+            return logo;
+        }
+
         return (
             <Wrapper className={className}>
-                <Logo
-                    hasLongIcon={this.hasLongIcon(network)}
-                    src={require(`./images/${network}.png`)} // eslint-disable-line
-                />
+                {logo}
             </Wrapper>
         );
     }
@@ -43,6 +53,7 @@ class CoinLogo extends PureComponent {
 CoinLogo.propTypes = {
     network: PropTypes.string,
     className: PropTypes.string,
+    standalone: PropTypes.bool,
 };
 
 export default CoinLogo;

From f34992dd681500d61bf8f32f41e5c30e23179f01 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 17 Dec 2018 12:52:47 +0100
Subject: [PATCH 11/23] proper link and coin img size

---
 .../components/FirmwareUnsupported/index.js   | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
index 097f004d..ca9367eb 100644
--- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
@@ -9,6 +9,14 @@ import Button from 'components/Button';
 import Link from 'components/Link';
 import CoinLogo from 'components/images/CoinLogo';
 
+const getInfoUrl = (networkShortcut: ?string) => {
+    const urls = {
+        default: 'https://wiki.trezor.io',
+        xrp: 'https://wiki.trezor.io/Ripple_(XRP)',
+    };
+
+    return networkShortcut ? urls[networkShortcut] : urls.default;
+};
 
 type Props = {
     networkShortcut: ?string,
@@ -23,10 +31,12 @@ const Wrapper = styled.div`
     flex: 1;
 `;
 
-const StyledCoinLogo = styled(CoinLogo)`
+const CoinLogoWrapper = styled.div`
     margin: 10px 0;
-    padding: 0;
-    width: auto;
+`;
+
+const StyledCoinLogo = styled(CoinLogo)`
+    width: 32px;
 `;
 
 const StyledLink = styled(Link)`
@@ -52,10 +62,10 @@ const FirmwareUnsupported = (props: Props) => {
     return (
         <Wrapper>
             <Row>
-                {props.networkShortcut && <StyledCoinLogo network={props.networkShortcut} />}
+                {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
                 <H2>{props.title}</H2>
                 <Message>{props.message}</Message>
-                <StyledLink href="https://wiki.trezor.io/">
+                <StyledLink href={getInfoUrl(props.networkShortcut)}>
                     <Button>Find out more info</Button>
                 </StyledLink>
             </Row>

From 2aa6a82911d76ba31d57a76278dae5c2bce69310 Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Mon, 17 Dec 2018 18:33:55 +0100
Subject: [PATCH 12/23] split loader, notification and exceptionPage to
 isolated variables

and pass them as they are to views/Wallet/components/Content
---
 src/actions/SelectedAccountActions.js         | 101 +++++++++---------
 .../Context/components/Account/index.js       |  44 ++++----
 src/reducers/SelectedAccountReducer.js        |  51 +++++----
 .../components/FirmwareOutdated/index.js      |  76 +++++++++++++
 src/views/Wallet/components/Content/index.js  |  52 ++++++---
 .../views/Account/Receive/ethereum/index.js   |   9 +-
 .../views/Account/Receive/ripple/index.js     |   9 +-
 .../views/Account/Send/ethereum/index.js      |   8 +-
 .../Wallet/views/Account/Send/ripple/index.js |   8 +-
 .../Wallet/views/Account/SignVerify/index.js  |  10 +-
 .../views/Account/Summary/ethereum/index.js   |   8 +-
 .../views/Account/Summary/ripple/index.js     |   8 +-
 12 files changed, 247 insertions(+), 137 deletions(-)
 create mode 100644 src/views/Wallet/components/Content/components/FirmwareOutdated/index.js

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index b2dd5fe9..b6a93220 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -8,6 +8,7 @@ import * as TOKEN from 'actions/constants/token';
 import * as PENDING from 'actions/constants/pendingTx';
 
 import * as reducerUtils from 'reducers/utils';
+import { initialState } from 'reducers/SelectedAccountReducer';
 
 import type {
     PayloadAction,
@@ -17,7 +18,12 @@ import type {
     State,
 } from 'flowtype';
 
-type SelectedAccountState = $ElementType<State, 'selectedAccount'>;
+import type {
+    State as SelectedAccountState,
+    Loader,
+    Notification,
+    ExceptionPage,
+} from 'reducers/SelectedAccountReducer';
 
 export type SelectedAccountAction = {
     type: typeof ACCOUNT.DISPOSE,
@@ -26,18 +32,38 @@ export type SelectedAccountAction = {
     payload: SelectedAccountState,
 };
 
-type AccountStatus = {
-    type: ?string; // notification type
-    title: ?string; // notification title
-    message?: ?string; // notification message
-    shouldRender: boolean; // should render account page
-}
-
 export const dispose = (): Action => ({
     type: ACCOUNT.DISPOSE,
 });
 
-const getAccountLoader = (state: State, selectedAccount: SelectedAccountState): ?AccountStatus => {
+// display exception page instead of component body
+const getExceptionPage = (state: State, selectedAccount: SelectedAccountState): ?ExceptionPage => {
+    const device = state.wallet.selectedDevice;
+    const { discovery, network } = selectedAccount;
+    if (!device || !device.features || !network || !discovery) return null;
+
+    if (discovery.fwOutdated) {
+        return {
+            type: 'info',
+            title: `Device ${device.instanceLabel} firmware is outdated`,
+            message: 'TODO: update firmware explanation',
+            shortcut: network.shortcut,
+        };
+    }
+    if (discovery.fwNotSupported) {
+        return {
+            type: 'fwNotSupported',
+            title: `${network.name} is not supported with Trezor ${device.features.model}`,
+            message: 'Find more information on Trezor Wiki.',
+            shortcut: network.shortcut,
+        };
+    }
+
+    return null;
+};
+
+// display loader instead of component body
+const getAccountLoader = (state: State, selectedAccount: SelectedAccountState): ?Loader => {
     const device = state.wallet.selectedDevice;
     const {
         account,
@@ -53,11 +79,11 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
         };
     }
 
-    // corner case: accountState didn't finish loading state after LOCATION_CHANGE action
+    // corner case: SelectedAccountState didn't change after LOCATION_CHANGE action
     if (!network) {
         return {
             type: 'progress',
-            title: 'Loading account state...',
+            title: 'Loading account',
             shouldRender: false,
         };
     }
@@ -66,24 +92,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
     if (account) return null;
     // account not found (yet). checking why...
 
-    if (discovery && discovery.fwOutdated) {
-        return {
-            type: 'info',
-            title: `Device ${device.instanceLabel} firmware is outdated`,
-            message: 'TODO: update firmware explanation',
-            shouldRender: false,
-        };
-    }
-
-    if (discovery && discovery.fwNotSupported) {
-        return {
-            type: 'fwNotSupported',
-            title: `${network.name} is not supported with Trezor ${(device.features || {}).model}`,
-            message: 'Find more information on Trezor Wiki.',
-            shouldRender: false,
-        };
-    }
-
     if (!discovery || (discovery.waitingForDevice || discovery.interrupted)) {
         if (device.connected) {
             // case 1: device is connected but discovery not started yet (probably waiting for auth)
@@ -130,7 +138,8 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
     };
 };
 
-const getAccountNotification = (state: State, selectedAccount: SelectedAccountState): ?AccountStatus => {
+// display notification above the component, with or without component body
+const getAccountNotification = (state: State, selectedAccount: SelectedAccountState): ?(Notification & { shouldRender: boolean }) => {
     const device = state.wallet.selectedDevice;
     const { account, network, discovery } = selectedAccount;
     if (!device || !network) return null;
@@ -198,16 +207,6 @@ export const observe = (prevState: State, action: Action): PayloadAction<boolean
     // ignore not listed actions
     if (actions.indexOf(action.type) < 0) return false;
     const state: State = getState();
-    const notification = {
-        type: null,
-        message: null,
-        title: null,
-    };
-    const loader = {
-        type: null,
-        message: null,
-        title: null,
-    };
 
     const { location } = state.router;
     // displayed route is not an account route
@@ -222,25 +221,29 @@ export const observe = (prevState: State, action: Action): PayloadAction<boolean
 
     // prepare new state for "selectedAccount" reducer
     const newState: SelectedAccountState = {
+        ...initialState,
         location: state.router.location.pathname,
         account,
         network,
         discovery,
         tokens,
         pending,
-        notification,
-        loader,
-        shouldRender: false,
     };
 
     // get "selectedAccount" status from newState
-    const statusNotification = getAccountNotification(state, newState);
-    const statusLoader = getAccountLoader(state, newState);
-    const shouldRender = (statusNotification && statusLoader) ? (statusNotification.shouldRender || statusLoader.shouldRender) : true;
+    const exceptionPage = getExceptionPage(state, newState);
+    const loader = getAccountLoader(state, newState);
+    const notification = getAccountNotification(state, newState);
+
+    if (exceptionPage) {
+        newState.exceptionPage = exceptionPage;
+    } else {
+        newState.loader = loader;
+        newState.notification = notification;
+    }
+
+    newState.shouldRender = !(loader || exceptionPage || (notification && !notification.shouldRender));
 
-    newState.notification = statusNotification || notification;
-    newState.shouldRender = shouldRender;
-    newState.loader = statusLoader || loader;
     // check if newState is different than previous state
     const stateChanged = reducerUtils.observeChanges(prevState.selectedAccount, newState, {
         account: ['balance', 'nonce'],
diff --git a/src/components/notifications/Context/components/Account/index.js b/src/components/notifications/Context/components/Account/index.js
index 8233001f..a4924900 100644
--- a/src/components/notifications/Context/components/Account/index.js
+++ b/src/components/notifications/Context/components/Account/index.js
@@ -7,34 +7,32 @@ import type { Props } from '../../index';
 // There could be only one account notification
 export default (props: Props) => {
     const { network, notification } = props.selectedAccount;
-    if (network && notification.type && notification.title) {
-        if (notification.type === 'backend') {
-            // special case: backend is down
-            // TODO: this is a different component with "auto resolve" button
-            return (
-                <Notification
-                    type="error"
-                    title={notification.title}
-                    message={notification.message}
-                    actions={
-                        [{
-                            label: 'Connect',
-                            callback: async () => {
-                                await props.blockchainReconnect(network.shortcut);
-                            },
-                        }]
-                    }
-                />
-            );
-        }
+    if (!network || !notification) return null;
+
+    if (notification.type === 'backend') {
+        // special case: backend is down
+        // TODO: this is a different component with "auto resolve" button
         return (
             <Notification
-                type={notification.type}
+                type="error"
                 title={notification.title}
                 message={notification.message}
+                actions={
+                    [{
+                        label: 'Connect',
+                        callback: async () => {
+                            await props.blockchainReconnect(network.shortcut);
+                        },
+                    }]
+                }
             />
         );
     }
-
-    return null;
+    return (
+        <Notification
+            type={notification.type}
+            title={notification.title}
+            message={notification.message}
+        />
+    );
 };
\ No newline at end of file
diff --git a/src/reducers/SelectedAccountReducer.js b/src/reducers/SelectedAccountReducer.js
index a7ce0b65..fba64661 100644
--- a/src/reducers/SelectedAccountReducer.js
+++ b/src/reducers/SelectedAccountReducer.js
@@ -10,23 +10,35 @@ import type {
     Discovery,
 } from 'flowtype';
 
+export type Loader = {
+    type: string,
+    title: string,
+    message?: string,
+}
+
+export type Notification = {
+    type: string,
+    title: string,
+    message?: string,
+}
+
+export type ExceptionPage = {
+    type: ?string,
+    title: ?string,
+    message: ?string,
+    shortcut: string,
+}
+
 export type State = {
-    location: string;
-    account: ?Account;
-    network: ?Network;
+    location: string,
+    account: ?Account,
+    network: ?Network,
     tokens: Array<Token>,
     pending: Array<PendingTx>,
     discovery: ?Discovery,
-    notification: {
-        type: ?string,
-        title: ?string,
-        message: ?string,
-    },
-    loader: {
-        type: ?string,
-        title: ?string,
-        message: ?string,
-    },
+    loader: ?Loader,
+    notification: ?Notification,
+    exceptionPage: ?ExceptionPage,
     shouldRender: boolean,
 };
 
@@ -37,16 +49,9 @@ export const initialState: State = {
     tokens: [],
     pending: [],
     discovery: null,
-    notification: {
-        type: null,
-        title: null,
-        message: null,
-    },
-    loader: {
-        type: null,
-        title: null,
-        message: null,
-    },
+    loader: null,
+    notification: null,
+    exceptionPage: null,
     shouldRender: false,
 };
 
diff --git a/src/views/Wallet/components/Content/components/FirmwareOutdated/index.js b/src/views/Wallet/components/Content/components/FirmwareOutdated/index.js
new file mode 100644
index 00000000..01f8994d
--- /dev/null
+++ b/src/views/Wallet/components/Content/components/FirmwareOutdated/index.js
@@ -0,0 +1,76 @@
+/* @flow */
+import React from 'react';
+import styled from 'styled-components';
+import colors from 'config/colors';
+
+import { FONT_SIZE } from 'config/variables';
+import { H2 } from 'components/Heading';
+import Button from 'components/Button';
+import Link from 'components/Link';
+import CoinLogo from 'components/images/CoinLogo';
+
+const getInfoUrl = (networkShortcut: ?string) => {
+    const urls = {
+        default: 'https://wiki.trezor.io',
+        xrp: 'https://wiki.trezor.io/Ripple_(XRP)',
+    };
+
+    return networkShortcut ? urls[networkShortcut] : urls.default;
+};
+
+type Props = {
+    networkShortcut: ?string,
+    title: ?string,
+    message: ?string,
+}
+
+const Wrapper = styled.div`
+    display: flex;
+    background: ${colors.WHITE};
+    flex-direction: column;
+    flex: 1;
+`;
+
+const CoinLogoWrapper = styled.div`
+    margin: 10px 0;
+`;
+
+const StyledCoinLogo = styled(CoinLogo)`
+    width: 32px;
+`;
+
+const StyledLink = styled(Link)`
+    padding-top: 24px;
+`;
+
+const Row = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+`;
+
+const Message = styled.div`
+    font-size: ${FONT_SIZE.SMALL};
+    color: ${colors.TEXT_SECONDARY};
+    text-align: center;
+`;
+
+// eslint-disable-next-line arrow-body-style
+const FirmwareOutdated = (props: Props) => {
+    return (
+        <Wrapper>
+            <Row>
+                {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
+                <H2>{props.title}</H2>
+                <Message>{props.message}</Message>
+                <StyledLink href={getInfoUrl(props.networkShortcut)}>
+                    <Button>Find out more info</Button>
+                </StyledLink>
+            </Row>
+        </Wrapper>
+    );
+};
+
+export default FirmwareOutdated;
diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index f5a38ebc..d1283fd7 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -1,11 +1,24 @@
-import React from 'react';
+/* @flow */
+
+import * as React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Loader from 'components/Loader';
 import { FONT_SIZE } from 'config/variables';
 import colors from 'config/colors';
+
+import type { State } from 'flowtype';
+
+import FirmwareOutdated from './components/FirmwareOutdated';
 import FirmwareUnsupported from './components/FirmwareUnsupported';
 
+type Props = {
+    children?: React.Node,
+    isLoading?: boolean,
+    loader?: $ElementType<$ElementType<State, 'selectedAccount'>, 'loader'>,
+    exceptionPage?: $ElementType<$ElementType<State, 'selectedAccount'>, 'exceptionPage'>,
+}
+
 const Wrapper = styled.div`
     display: flex;
     flex: 1;
@@ -37,38 +50,43 @@ const Row = styled.div`
     flex-direction: row;
 `;
 
+const getExceptionPage = (exceptionPage) => {
+    const { title, message, shortcut } = exceptionPage;
+    switch (exceptionPage.type) {
+        case 'fwOutdated':
+            return <FirmwareOutdated title={title} message={message} networkShortcut={shortcut} />;
+        case 'fwNotSupported':
+            return <FirmwareUnsupported title={title} message={message} networkShortcut={shortcut} />;
+        default: return null;
+    }
+};
+
 const Content = ({
     children,
-    title,
-    message,
-    type,
-    networkShortcut,
     isLoading = false,
-}) => (
+    loader,
+    exceptionPage,
+}: Props) => (
     <Wrapper>
         {(!isLoading) && children}
-        {isLoading && (type === 'progress' || type === 'info') && (
+        {isLoading && exceptionPage && getExceptionPage(exceptionPage)}
+        {isLoading && loader && (
             <Loading>
                 <Row>
-                    {type === 'progress' && <Loader size={30} />}
-                    <Text>{title || 'Initializing accounts'}</Text>
+                    {loader.type === 'progress' && <Loader size={30} />}
+                    <Text>{loader.title || 'Initializing accounts'}</Text>
                 </Row>
-                {message && <Message>{message}</Message>}
+                {loader.message && <Message>{loader.message}</Message>}
             </Loading>
         )}
-        {isLoading && (type === 'fwNotSupported') && (
-            <FirmwareUnsupported title={title} message={message} networkShortcut={networkShortcut} />
-        )}
     </Wrapper>
 );
 
 Content.propTypes = {
     children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]),
     isLoading: PropTypes.bool,
-    title: PropTypes.string,
-    message: PropTypes.string,
-    type: PropTypes.string,
-    networkShortcut: PropTypes.string,
+    loader: PropTypes.object,
+    exceptionPage: PropTypes.object,
 };
 
 export default Content;
diff --git a/src/views/Wallet/views/Account/Receive/ethereum/index.js b/src/views/Wallet/views/Account/Receive/ethereum/index.js
index 89340dcc..5646b7ed 100644
--- a/src/views/Wallet/views/Account/Receive/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Receive/ethereum/index.js
@@ -96,11 +96,12 @@ const AccountReceive = (props: Props) => {
         account,
         discovery,
         shouldRender,
-        loader,
-        network,
     } = props.selectedAccount;
-    const { type, title, message } = loader;
-    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+
+    if (!device || !account || !discovery || !shouldRender) {
+        const { loader, exceptionPage } = props.selectedAccount;
+        return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+    }
 
     const {
         addressVerified,
diff --git a/src/views/Wallet/views/Account/Receive/ripple/index.js b/src/views/Wallet/views/Account/Receive/ripple/index.js
index 94383077..c308eafd 100644
--- a/src/views/Wallet/views/Account/Receive/ripple/index.js
+++ b/src/views/Wallet/views/Account/Receive/ripple/index.js
@@ -96,11 +96,12 @@ const AccountReceive = (props: Props) => {
         account,
         discovery,
         shouldRender,
-        loader,
-        network,
     } = props.selectedAccount;
-    const { type, title, message } = loader;
-    if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+
+    if (!device || !account || !discovery || !shouldRender) {
+        const { loader, exceptionPage } = props.selectedAccount;
+        return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+    }
 
     const {
         addressVerified,
diff --git a/src/views/Wallet/views/Account/Send/ethereum/index.js b/src/views/Wallet/views/Account/Send/ethereum/index.js
index f92674eb..63a86a14 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/index.js
@@ -184,7 +184,6 @@ const AccountSend = (props: Props) => {
         discovery,
         tokens,
         shouldRender,
-        loader,
     } = props.selectedAccount;
     const {
         address,
@@ -213,8 +212,11 @@ const AccountSend = (props: Props) => {
         updateFeeLevels,
         onSend,
     } = props.sendFormActions;
-    const { type, title, message } = loader;
-    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+
+    if (!device || !account || !discovery || !network || !shouldRender) {
+        const { loader, exceptionPage } = props.selectedAccount;
+        return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+    }
 
     const isCurrentCurrencyToken = networkSymbol !== currency;
 
diff --git a/src/views/Wallet/views/Account/Send/ripple/index.js b/src/views/Wallet/views/Account/Send/ripple/index.js
index 7d7caf9e..136031bc 100644
--- a/src/views/Wallet/views/Account/Send/ripple/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/index.js
@@ -122,7 +122,6 @@ const AccountSend = (props: Props) => {
         network,
         discovery,
         shouldRender,
-        loader,
     } = props.selectedAccount;
     const {
         address,
@@ -142,8 +141,11 @@ const AccountSend = (props: Props) => {
         onSetMax,
         onSend,
     } = props.sendFormActions;
-    const { type, title, message } = loader;
-    if (!device || !account || !discovery || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+
+    if (!device || !account || !discovery || !network || !shouldRender) {
+        const { loader, exceptionPage } = props.selectedAccount;
+        return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+    }
 
     let isSendButtonDisabled: boolean = Object.keys(errors).length > 0 || total === '0' || amount.length === 0 || address.length === 0 || sending;
     let sendButtonText: string = ` ${total} ${network.symbol}`;
diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js
index fc8d39a0..5424afa2 100644
--- a/src/views/Wallet/views/Account/SignVerify/index.js
+++ b/src/views/Wallet/views/Account/SignVerify/index.js
@@ -57,10 +57,14 @@ class SignVerify extends Component <Props> {
     render() {
         const device = this.props.wallet.selectedDevice;
         const {
-            account, discovery, shouldRender, notification, network,
+            account, discovery, shouldRender,
         } = this.props.selectedAccount;
-        const { type, title, message } = notification;
-        if (!device || !account || !discovery || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+
+        if (!device || !account || !discovery || !shouldRender) {
+            const { loader, exceptionPage } = this.props.selectedAccount;
+            return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+        }
+
         const {
             signVerifyActions,
             signVerify: {
diff --git a/src/views/Wallet/views/Account/Summary/ethereum/index.js b/src/views/Wallet/views/Account/Summary/ethereum/index.js
index a2ce8d95..ba895fe7 100644
--- a/src/views/Wallet/views/Account/Summary/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js
@@ -76,13 +76,13 @@ const AccountSummary = (props: Props) => {
         network,
         tokens,
         pending,
-        loader,
         shouldRender,
     } = props.selectedAccount;
 
-    const { type, title, message } = loader;
-
-    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+    if (!device || !account || !network || !shouldRender) {
+        const { loader, exceptionPage } = props.selectedAccount;
+        return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+    }
 
     const explorerLink: string = `${network.explorer.address}${account.address}`;
     const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
diff --git a/src/views/Wallet/views/Account/Summary/ripple/index.js b/src/views/Wallet/views/Account/Summary/ripple/index.js
index ea0501e1..f66bde06 100644
--- a/src/views/Wallet/views/Account/Summary/ripple/index.js
+++ b/src/views/Wallet/views/Account/Summary/ripple/index.js
@@ -66,13 +66,13 @@ const AccountSummary = (props: Props) => {
         account,
         network,
         pending,
-        loader,
         shouldRender,
     } = props.selectedAccount;
 
-    const { type, title, message } = loader;
-
-    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} networkShortcut={(network || {}).shortcut} isLoading />;
+    if (!device || !account || !network || !shouldRender) {
+        const { loader, exceptionPage } = props.selectedAccount;
+        return <Content loader={loader} exceptionPage={exceptionPage} isLoading />;
+    }
 
     const explorerLink: string = `${network.explorer.address}${account.address}`;
     const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);

From ddf00bc15c9378071ffe9c9ec7cfa5954aee4499 Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Mon, 17 Dec 2018 18:45:47 +0100
Subject: [PATCH 13/23] use existing component for selectedAccount outdated
 firmware exception

---
 .../components/FirmwareOutdated/index.js      | 76 -------------------
 src/views/Wallet/components/Content/index.js  |  5 +-
 2 files changed, 3 insertions(+), 78 deletions(-)
 delete mode 100644 src/views/Wallet/components/Content/components/FirmwareOutdated/index.js

diff --git a/src/views/Wallet/components/Content/components/FirmwareOutdated/index.js b/src/views/Wallet/components/Content/components/FirmwareOutdated/index.js
deleted file mode 100644
index 01f8994d..00000000
--- a/src/views/Wallet/components/Content/components/FirmwareOutdated/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* @flow */
-import React from 'react';
-import styled from 'styled-components';
-import colors from 'config/colors';
-
-import { FONT_SIZE } from 'config/variables';
-import { H2 } from 'components/Heading';
-import Button from 'components/Button';
-import Link from 'components/Link';
-import CoinLogo from 'components/images/CoinLogo';
-
-const getInfoUrl = (networkShortcut: ?string) => {
-    const urls = {
-        default: 'https://wiki.trezor.io',
-        xrp: 'https://wiki.trezor.io/Ripple_(XRP)',
-    };
-
-    return networkShortcut ? urls[networkShortcut] : urls.default;
-};
-
-type Props = {
-    networkShortcut: ?string,
-    title: ?string,
-    message: ?string,
-}
-
-const Wrapper = styled.div`
-    display: flex;
-    background: ${colors.WHITE};
-    flex-direction: column;
-    flex: 1;
-`;
-
-const CoinLogoWrapper = styled.div`
-    margin: 10px 0;
-`;
-
-const StyledCoinLogo = styled(CoinLogo)`
-    width: 32px;
-`;
-
-const StyledLink = styled(Link)`
-    padding-top: 24px;
-`;
-
-const Row = styled.div`
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`;
-
-const Message = styled.div`
-    font-size: ${FONT_SIZE.SMALL};
-    color: ${colors.TEXT_SECONDARY};
-    text-align: center;
-`;
-
-// eslint-disable-next-line arrow-body-style
-const FirmwareOutdated = (props: Props) => {
-    return (
-        <Wrapper>
-            <Row>
-                {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
-                <H2>{props.title}</H2>
-                <Message>{props.message}</Message>
-                <StyledLink href={getInfoUrl(props.networkShortcut)}>
-                    <Button>Find out more info</Button>
-                </StyledLink>
-            </Row>
-        </Wrapper>
-    );
-};
-
-export default FirmwareOutdated;
diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index d1283fd7..49853705 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -9,7 +9,8 @@ import colors from 'config/colors';
 
 import type { State } from 'flowtype';
 
-import FirmwareOutdated from './components/FirmwareOutdated';
+// import FirmwareOutdated from './components/FirmwareOutdated';
+import FirmwareUpdate from 'views/Wallet/views/FirmwareUpdate';
 import FirmwareUnsupported from './components/FirmwareUnsupported';
 
 type Props = {
@@ -54,7 +55,7 @@ const getExceptionPage = (exceptionPage) => {
     const { title, message, shortcut } = exceptionPage;
     switch (exceptionPage.type) {
         case 'fwOutdated':
-            return <FirmwareOutdated title={title} message={message} networkShortcut={shortcut} />;
+            return <FirmwareUpdate />;
         case 'fwNotSupported':
             return <FirmwareUnsupported title={title} message={message} networkShortcut={shortcut} />;
         default: return null;

From 9d6bce9251ce87564fc659f1889dc5298fafa5bf Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Mon, 17 Dec 2018 18:48:30 +0100
Subject: [PATCH 14/23] fix fwOutdated exceptionPage values

---
 src/actions/SelectedAccountActions.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index b6a93220..32aecfb2 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -44,10 +44,10 @@ const getExceptionPage = (state: State, selectedAccount: SelectedAccountState):
 
     if (discovery.fwOutdated) {
         return {
-            type: 'info',
-            title: `Device ${device.instanceLabel} firmware is outdated`,
-            message: 'TODO: update firmware explanation',
-            shortcut: network.shortcut,
+            type: 'fwOutdated',
+            title: 'not-used',
+            message: 'not-used',
+            shortcut: 'not-used',
         };
     }
     if (discovery.fwNotSupported) {

From 4c4b40c6392dd794b56b8547bc37cd6ef4ce9819 Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Mon, 17 Dec 2018 19:00:44 +0100
Subject: [PATCH 15/23] remove unused import

---
 src/views/Wallet/components/Content/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js
index 49853705..ab621a2b 100644
--- a/src/views/Wallet/components/Content/index.js
+++ b/src/views/Wallet/components/Content/index.js
@@ -9,7 +9,6 @@ import colors from 'config/colors';
 
 import type { State } from 'flowtype';
 
-// import FirmwareOutdated from './components/FirmwareOutdated';
 import FirmwareUpdate from 'views/Wallet/views/FirmwareUpdate';
 import FirmwareUnsupported from './components/FirmwareUnsupported';
 

From f24f0b33ea11534e867812d7b094b6ab3ef0a862 Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Mon, 17 Dec 2018 19:07:11 +0100
Subject: [PATCH 16/23] add explanation of 'not-used' strings

---
 src/actions/SelectedAccountActions.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index 32aecfb2..63f4272a 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -43,6 +43,7 @@ const getExceptionPage = (state: State, selectedAccount: SelectedAccountState):
     if (!device || !device.features || !network || !discovery) return null;
 
     if (discovery.fwOutdated) {
+        // those values are not used because in this case views/Wallet/views/FirmwareUpdate component will be displayed and it already has text content
         return {
             type: 'fwOutdated',
             title: 'not-used',

From f9f1b6758edfe3a3993b5e9f2499092ae3518369 Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Mon, 17 Dec 2018 19:19:32 +0100
Subject: [PATCH 17/23] remove unused field from getAccountLoader

---
 src/actions/SelectedAccountActions.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/actions/SelectedAccountActions.js b/src/actions/SelectedAccountActions.js
index 63f4272a..fe6a0d2e 100644
--- a/src/actions/SelectedAccountActions.js
+++ b/src/actions/SelectedAccountActions.js
@@ -76,7 +76,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
         return {
             type: 'progress',
             title: 'Loading device...',
-            shouldRender: false,
         };
     }
 
@@ -85,7 +84,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
         return {
             type: 'progress',
             title: 'Loading account',
-            shouldRender: false,
         };
     }
 
@@ -100,7 +98,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
                 return {
                     type: 'progress',
                     title: 'Authenticating device...',
-                    shouldRender: false,
                 };
             }
             // case 2: device is unavailable (created with different passphrase settings) account cannot be accessed
@@ -109,7 +106,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
                 type: 'info',
                 title: `Device ${device.instanceLabel} is unavailable`,
                 message: 'Change passphrase settings to use this device',
-                shouldRender: false,
             };
         }
 
@@ -118,7 +114,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
             type: 'info',
             title: `Device ${device.instanceLabel} is disconnected`,
             message: 'Connect device to load accounts',
-            shouldRender: false,
         };
     }
 
@@ -127,7 +122,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
         return {
             type: 'info',
             title: 'Account does not exist',
-            shouldRender: false,
         };
     }
 
@@ -135,7 +129,6 @@ const getAccountLoader = (state: State, selectedAccount: SelectedAccountState):
     return {
         type: 'progress',
         title: 'Loading account',
-        shouldRender: false,
     };
 };
 

From 1878c6beb4547a8c0e4acdadd022d541a9c8298d Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 18 Dec 2018 10:18:58 +0100
Subject: [PATCH 18/23] padding around "select coin" message

---
 src/views/Wallet/views/Dashboard/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js
index a0766c90..ea4dfc35 100644
--- a/src/views/Wallet/views/Dashboard/index.js
+++ b/src/views/Wallet/views/Dashboard/index.js
@@ -9,16 +9,14 @@ import DashboardImg from 'images/dashboard.png';
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
-    flex: 1;
 `;
 
 const Row = styled.div`
     flex: 1;
     display: flex;
-    padding: 0px 48px;
+    padding: 100px 48px;
     
     flex-direction: column;
-    justify-content: center;
     align-items: center;
 `;
 

From a189218b9d29fcb2e67bb5ab6b56f80ca5e6f5b0 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 17 Dec 2018 22:24:39 +0100
Subject: [PATCH 19/23] switch to new attrs syntax

---
 .../components/StickyContainer/index.js       | 23 +++++++++----------
 .../Wallet/components/LeftNavigation/index.js |  8 +++----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
index dfa4a2f1..4d10baef 100644
--- a/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/StickyContainer/index.js
@@ -19,11 +19,10 @@ type State = {
     footerFixed: boolean,
 }
 
-const AsideWrapper = styled.aside.attrs({
-    style: ({ minHeight }) => ({
-        minHeight,
-    }),
-})`
+const AsideWrapper = styled.aside.attrs(props => ({
+    style: { minHeight: props.minHeight },
+}))`
+
     position: relative;
     top: 0px;
     width: 320px;
@@ -33,13 +32,13 @@ const AsideWrapper = styled.aside.attrs({
     border-right: 1px solid ${colors.DIVIDER};
 `;
 
-const StickyContainerWrapper = styled.div.attrs({
-    style: ({ top, left, paddingBottom }) => ({
-        top,
-        left,
-        paddingBottom,
-    }),
-})`
+const StickyContainerWrapper = styled.div.attrs(props => ({
+    style: {
+        top: props.top,
+        left: props.left,
+        paddingBottom: props.paddingBottom,
+    },
+}))`
     position: fixed;
     border-right: 1px solid ${colors.DIVIDER};
     width: 320px;
diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js
index 1bd89597..cca5eab1 100644
--- a/src/views/Wallet/components/LeftNavigation/index.js
+++ b/src/views/Wallet/components/LeftNavigation/index.js
@@ -45,11 +45,9 @@ const TransitionContentWrapper = styled.div`
     vertical-align: top;
 `;
 
-const Footer = styled.div.attrs({
-    style: ({ position }) => ({
-        position,
-    }),
-})`
+const Footer = styled.div.attrs(props => ({
+    style: { position: props.position },
+}))`
     width: 320px;
     bottom: 0;
     background: ${colors.MAIN};

From 6171d5ea0fc7ed5602d24adac7dc706fa93c72e6 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 18 Dec 2018 10:34:00 +0100
Subject: [PATCH 20/23] upgrade react-hot-loader to 4.6.2

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++++++-----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index cb1037c6..91c3d998 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
         "rc-tooltip": "^3.7.0",
         "react": "^16.6.3",
         "react-dom": "^16.6.3",
-        "react-hot-loader": "^4.3.4",
+        "react-hot-loader": "^4.6.2",
         "react-json-view": "^1.19.1",
         "react-qr-svg": "^2.1.0",
         "react-redux": "^5.0.7",
diff --git a/yarn.lock b/yarn.lock
index 52f0eb23..dc03de17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7443,6 +7443,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -9729,17 +9734,20 @@ react-dom@^16.6.3:
     prop-types "^15.6.2"
     scheduler "^0.11.2"
 
-react-hot-loader@^4.3.4:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.3.4.tgz#4f9bdd55bb20d77a6ae8931fa1c187e5f0ce6279"
-  integrity sha512-LlKjtHq+RhDq9xm6crXojbkzrEvli5F4/RaeJ//XtDWrwwsAHDjEqKfZZiPCxv7gWV2cxE3YE8TXeE9BDzLqOA==
+react-hot-loader@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.6.2.tgz#9844b76a7bf4b6fdd45dd91f7e757ddf3aad5289"
+  integrity sha512-9XxH/t9jblu4vUDgxHcMLwvm4aOhaoxazzTP9vwjTVzOgU987T4rDYA85XrlmbDan9WkD+h/iVHOK8F8UnQsDg==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"
     hoist-non-react-statics "^2.5.0"
+    loader-utils "^1.1.0"
+    lodash.merge "^4.6.1"
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
     shallowequal "^1.0.2"
+    source-map "^0.7.3"
 
 react-input-autosize@^2.2.1:
   version "2.2.1"
@@ -11066,7 +11074,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.2:
+source-map@^0.7.2, source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==

From 3da10ecf5a6d49ad507f703dfe418b42877796ff Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 18 Dec 2018 10:53:11 +0100
Subject: [PATCH 21/23] fix warnings from react devtools ext

---
 src/store.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/store.js b/src/store.js
index 971aa367..78fce246 100644
--- a/src/store.js
+++ b/src/store.js
@@ -47,9 +47,11 @@ if (buildUtils.isDev()) {
         collapsed: true,
     });
 
-    if (window && typeof window.devToolsExtension === 'function') {
-        enhancers.push(window.devToolsExtension());
+    /* eslint-disable no-underscore-dangle */
+    if (window && typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ === 'function') {
+        enhancers.push(window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__());
     }
+    /* eslint-enable */
 
     composedEnhancers = compose(
         applyMiddleware(logger, ...middlewares, ...services),

From 032c081447d1d2b72bea5224a34dc146f78b9fc1 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Tue, 18 Dec 2018 10:58:12 +0100
Subject: [PATCH 22/23] pass className prop to DeviceHeader component

---
 src/components/DeviceHeader/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/DeviceHeader/index.js b/src/components/DeviceHeader/index.js
index 81250486..079f9744 100644
--- a/src/components/DeviceHeader/index.js
+++ b/src/components/DeviceHeader/index.js
@@ -101,6 +101,7 @@ const DeviceHeader = ({
     isAccessible = true,
     disabled = false,
     isSelected = false,
+    className,
 }) => {
     const status = getStatus(device);
     return (
@@ -109,6 +110,7 @@ const DeviceHeader = ({
             isOpen={isOpen}
             isHoverable={isHoverable}
             disabled={disabled}
+            className={className}
         >
             <ClickWrapper
                 disabled={disabled}
@@ -139,6 +141,7 @@ DeviceHeader.propTypes = {
     isOpen: PropTypes.bool,
     isSelected: PropTypes.bool,
     onClickWrapper: PropTypes.func.isRequired,
+    className: PropTypes.string,
 };
 
 export default DeviceHeader;

From 76fb6a97fa9da30f2f72455bf849f6f54c7765e6 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Tue, 18 Dec 2018 13:21:00 +0100
Subject: [PATCH 23/23] Removed eslint disable and fix

---
 .../components/FirmwareUnsupported/index.js   | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
index ca9367eb..0d0b5fb5 100644
--- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
@@ -57,20 +57,17 @@ const Message = styled.div`
     text-align: center;
 `;
 
-// eslint-disable-next-line arrow-body-style
-const FirmwareUnsupported = (props: Props) => {
-    return (
-        <Wrapper>
-            <Row>
-                {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
-                <H2>{props.title}</H2>
-                <Message>{props.message}</Message>
-                <StyledLink href={getInfoUrl(props.networkShortcut)}>
-                    <Button>Find out more info</Button>
-                </StyledLink>
-            </Row>
-        </Wrapper>
-    );
-};
+const FirmwareUnsupported = (props: Props) => (
+    <Wrapper>
+        <Row>
+            {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
+            <H2>{props.title}</H2>
+            <Message>{props.message}</Message>
+            <StyledLink href={getInfoUrl(props.networkShortcut)}>
+                <Button>Find out more info</Button>
+            </StyledLink>
+        </Row>
+    </Wrapper>
+);
 
 export default FirmwareUnsupported;