From bb4cd79004c192961bfee3debfb991749b079bfc Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 25 Feb 2019 13:28:58 +0100
Subject: [PATCH] add NoBackup component

---
 src/support/routes.js                    |  5 +++
 src/views/Wallet/views/NoBackup/index.js | 57 ++++++++++++++++++++++++
 src/views/index.js                       |  2 +
 3 files changed, 64 insertions(+)
 create mode 100644 src/views/Wallet/views/NoBackup/index.js

diff --git a/src/support/routes.js b/src/support/routes.js
index 717bed03..1ebe97c2 100644
--- a/src/support/routes.js
+++ b/src/support/routes.js
@@ -62,6 +62,11 @@ export const routes: Array<Route> = [
         pattern: '/device/:device/firmware-update',
         fields: ['device', 'firmware-update'],
     },
+    {
+        name: 'wallet-backup',
+        pattern: '/device/:device/backup',
+        fields: ['device', 'backup'],
+    },
     {
         name: 'wallet-device-settings',
         pattern: '/device/:device/settings',
diff --git a/src/views/Wallet/views/NoBackup/index.js b/src/views/Wallet/views/NoBackup/index.js
new file mode 100644
index 00000000..53c27cf9
--- /dev/null
+++ b/src/views/Wallet/views/NoBackup/index.js
@@ -0,0 +1,57 @@
+/* @flow */
+
+import React from 'react';
+import styled from 'styled-components';
+import { H1 } from 'components/Heading';
+import P from 'components/Paragraph';
+import Link from 'components/Link';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
+
+import { FONT_SIZE } from 'config/variables';
+import colors from 'config/colors';
+import icons from 'config/icons';
+
+const Wrapper = styled.section`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 90px 35px 40px 35px;
+`;
+
+const StyledNavLink = styled(Link)`
+    color: ${colors.TEXT_SECONDARY};
+    padding-top: 20px;
+    font-size: ${FONT_SIZE.BASE};
+`;
+
+const StyledH1 = styled(H1)`
+    text-align: center;
+`;
+
+const Message = styled.div`
+    text-align: center;
+    padding: 0 0 15px 0;
+`;
+
+const FirmwareUpdate = () => (
+    <Wrapper>
+        <Icon
+            size={128}
+            color={colors.WARNING_PRIMARY}
+            icon={icons.WARNING}
+        />
+        <StyledH1>Your Trezor is not backed up!</StyledH1>
+        <Message>
+            <P>If your device is ever lost or damaged, your funds will be lost. Backup your device first, to protect your coins against such events.</P>
+            <P>Please use Bitcoin wallet interface to create a backup.</P>
+        </Message>
+        <Link href="https://wallet.trezor.io?backup=1">
+            <Button>Take me to the Bitcoin wallet</Button>
+        </Link>
+        <StyledNavLink to="/">I’ll do that later.</StyledNavLink>
+    </Wrapper>
+);
+
+export default FirmwareUpdate;
\ No newline at end of file
diff --git a/src/views/index.js b/src/views/index.js
index 1b0a8963..184b4133 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -27,6 +27,7 @@ import WalletDeviceSettings from 'views/Wallet/views/DeviceSettings';
 import WalletSettings from 'views/Wallet/views/WalletSettings';
 import WalletBootloader from 'views/Wallet/views/Bootloader';
 import WalletFirmwareUpdate from 'views/Wallet/views/FirmwareUpdate';
+import WalletNoBackup from 'views/Wallet/views/NoBackup';
 import WalletInitialize from 'views/Wallet/views/Initialize';
 import WalletSeedless from 'views/Wallet/views/Seedless';
 import WalletAcquire from 'views/Wallet/views/Acquire';
@@ -54,6 +55,7 @@ const App = () => (
                             <Route exact path={getPattern('wallet-initialize')} component={WalletInitialize} />
                             <Route exact path={getPattern('wallet-seedless')} component={WalletSeedless} />
                             <Route exact path={getPattern('wallet-firmware-update')} component={WalletFirmwareUpdate} />
+                            <Route exact path={getPattern('wallet-backup')} component={WalletNoBackup} />
                             <Route exact path={getPattern('wallet-device-settings')} component={WalletDeviceSettings} />
                             <Route exact path={getPattern('wallet-account-summary')} component={AccountSummary} />
                             <Route path={getPattern('wallet-account-send')} component={AccountSend} />