Remember device refactored

src/components/modal/ConfirmSignTx/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import colors from 'config/colors';
+import styled from 'styled-components';
+import P from 'components/Paragraph';
+import { H3 } from 'components/Heading';
+
+const Wrapper = styled.div`
+    width: 390px;
+`;
+
+const Header = styled.div`
+`;
+
+const Content = styled.div`
+    border-top: 1px solid ${colors.DIVIDER};
+    background: ${colors.MAIN};
+    padding: 24px 48px;
+`;
+
+const Label = styled.div`
+    font-size: 10px;
+    color: ${colors.TEXT_SECONDARY};
+`;
+
+const ConfirmSignTx = (props) => {
+    if (!props.modal.opened) return null;
+    const { device } = props.modal;
+
+    const {
+        amount,
+        address,
+        currency,
+        total,
+        selectedFeeLevel,
+    } = props.sendForm;
+
+    return (
+        <Wrapper>
+            <Header>
+                <H3>Confirm transaction on { device.label } device</H3>
+                <P>Details are shown on display</P>
+            </Header>
+            <Content>
+                <Label>Send </Label>
+                <P>{ `${amount} ${currency}` }</P>
+                <Label>To</Label>
+                <P>{ address }</P>
+                <Label>Fee</Label>
+                <P>{ selectedFeeLevel.label }</P>
+            </Content>
+        </Wrapper>
+    );
+};
+
+export default ConfirmSignTx;

src/components/modal/RememberDevice.js

@@ -94,44 +94,4 @@ export default class RememberDevice extends Component<Props, State> {
             </div>
         );
     }
-}
-
-export class ForgetDevice extends Component<Props> {
-    keyboardHandler: (event: KeyboardEvent) => void;
-
-    keyboardHandler(event: KeyboardEvent): void {
-        if (event.keyCode === 13) {
-            event.preventDefault();
-            this.forget();
-        }
-    }
-
-    componentDidMount(): void {
-        this.keyboardHandler = this.keyboardHandler.bind(this);
-        window.addEventListener('keydown', this.keyboardHandler, false);
-    }
-
-    componentWillUnmount(): void {
-        window.removeEventListener('keydown', this.keyboardHandler, false);
-    }
-
-    forget() {
-        if (this.props.modal.opened) {
-            this.props.modalActions.onForgetSingleDevice(this.props.modal.device);
-        }
-    }
-
-    render() {
-        if (!this.props.modal.opened) return null;
-        const { device } = this.props.modal;
-        const { onCancel } = this.props.modalActions;
-        return (
-            <div className="remember">
-                <h3>Forget { device.instanceLabel } ?</h3>
-                <p>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.</p>
-                <button onClick={event => this.forget()}>Forget</button>
-                <button className="white" onClick={onCancel}>Don't forget</button>
-            </div>
-        );
-    }
-}
+}