Print 12 words backup to printer

app/infra/printService/index.js

@@ -0,0 +1 @@
+export { default as printService } from './printService'; // eslint-disable-line import/prefer-default-export

app/infra/printService/printService.js

@@ -0,0 +1,11 @@
+// @flow
+import { ipcRenderer } from 'electron';
+import { ipcConsts } from '/vars';
+
+class PrintService {
+  static print({ content }: { content: string }) {
+    ipcRenderer.send(ipcConsts.PRINT, { content });
+  }
+}
+
+export default PrintService;

app/screens/wallet/TwelveWordsBackup.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import type { RouterHistory } from 'react-router-dom';
 import { SmButton } from '/basicComponents';
 import { smColors } from '/vars';
+import { printService } from '/infra/printService';
 
 const Wrapper = styled.div`
   width: 100%;
@@ -113,15 +114,26 @@ type State = {
 };
 
 class TwelveWordsBackup extends Component<Props, State> {
-  state = {
-    isTwelveWordsCopied: false
-  };
+  twelveWords: Array<string>;
+
+  twelveWordsPrint: string;
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isTwelveWordsCopied: false
+    };
+    const { mnemonic } = props;
+    this.twelveWords = mnemonic.split(' ');
+    this.twelveWordsPrint = '<div>';
+    this.twelveWords.forEach((word: string, index: number) => {
+      this.twelveWordsPrint += `<h2>${index + 1} ${word}</h2>`;
+    });
+    this.twelveWordsPrint += '</div>';
+  }
 
   render() {
-    const { mnemonic } = this.props;
     const { isTwelveWordsCopied } = this.state;
-    const twelveWords = mnemonic.split(' ');
-
     return (
       <Wrapper>
         <Header>Create a 12 Words Backup</Header>
@@ -130,7 +142,7 @@ class TwelveWordsBackup extends Component<Props, State> {
           paper and store the paper in a safe place. Alternatively, print it, or copy & paste it into your password manager.
         </HeaderExplanation>
         <TwelveWordsContainer>
-          {twelveWords.map((word: string, index: number) => (
+          {this.twelveWords.map((word: string, index: number) => (
             <WordWrapper key={word}>
               <IndexWrapper>
                 <Index>{`${index + 1}`}</Index>
@@ -149,10 +161,10 @@ class TwelveWordsBackup extends Component<Props, State> {
         </NotificationSection>
         <ButtonsRow>
           <LeftButtonsContainer>
-            <SmButton text="Print" theme="green" onPress={this.print12Words} style={{ width: 144, marginRight: 18 }} />
-            <SmButton text="Copy" theme="green" onPress={this.copy12Words} style={{ width: 144 }} />
+            <SmButton text="Print" theme="green" onPress={this.print12Words} style={{ width: 150, marginRight: 20 }} />
+            <SmButton text="Copy" theme="green" onPress={this.copy12Words} style={{ width: 150 }} />
           </LeftButtonsContainer>
-          <SmButton text="Test Me" theme="orange" onPress={this.navigateToTestMe} style={{ width: 144 }} />
+          <SmButton text="Test Me" theme="orange" onPress={this.navigateToTestMe} style={{ width: 150 }} />
         </ButtonsRow>
         <ActionLink onClick={this.learnMoreAboutPaperBackup}>Learn more about paper backup</ActionLink>
       </Wrapper>
@@ -170,14 +182,14 @@ class TwelveWordsBackup extends Component<Props, State> {
     this.setState({ isTwelveWordsCopied: true });
   };
 
-  print12Words = () => {};
+  print12Words = () => printService.print({ content: this.twelveWordsPrint });
 
   learnMoreAboutPaperBackup = () => {};
 }
+
 const mapStateToProps = (state) => ({
   mnemonic: state.wallet.mnemonic
 });
 
 TwelveWordsBackup = connect(mapStateToProps)(TwelveWordsBackup);
-
 export default TwelveWordsBackup;

app/vars/ipcConsts.js

@@ -21,6 +21,7 @@ const ipcConsts = {
   GET_AVAILABLE_DISK_SPACE: 'GET_AVAILABLE_DISK_SPACE',
   GET_AVAILABLE_DISK_SPACE_SUCCESS: 'GET_AVAILABLE_DISK_SPACE_SUCCESS',
   GET_AVAILABLE_DISK_SPACE_FAILURE: 'GET_AVAILABLE_DISK_SPACE_FAILURE',
+  PRINT: 'PRINT',
   // gRPC calls
   GET_BALANCE: 'GET_BALANCE',
   GET_BALANCE_SUCCESS: 'GET_BALANCE_SUCCESS',

desktop/main.dev.js

@@ -83,6 +83,14 @@ ipcMain.on(ipcConsts.SEND_TX, async (event, request) => {
   netService.sendTx({ event, ...request });
 });
 
+ipcMain.on(ipcConsts.PRINT, (event, request: { content: string }) => {
+  const printerWindow = new BrowserWindow({ width: 800, height: 800, show: false, webPreferences: { devTools: false } });
+  printerWindow.loadURL(`file://${__dirname}/printer.html`);
+  printerWindow.webContents.on('did-finish-load', () => {
+    printerWindow.webContents.send('LOAD_CONTENT_AND_PRINT', { content: request.content });
+  });
+});
+
 app.on('window-all-closed', () => {
   // Respect the OSX convention of having the application in memory even
   // after all windows have been closed

desktop/printer.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <script>
+      const ipcRenderer = require('electron').ipcRenderer;
+      const remote = require('electron').remote;
+      ipcRenderer.on('LOAD_CONTENT_AND_PRINT', async (event, { content }) => {
+          document.body.innerHTML = content;
+          await window.print();
+          remote.getCurrentWindow().close();
+      });
+    </script>
+  </body>
+</html>