From 0cb38788d2da9228f988e381fb001cd0ae2ffcaf Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 15 Sep 2020 16:02:23 +0200
Subject: [PATCH 01/16] Add button for printing to secretkey export dialog

---
 i18n/locales/en/account-settings.json         |  3 +-
 src/Account/components/AccountHeaderCard.tsx  | 21 ++++----
 src/Account/components/KeyExportBox.tsx       | 16 +++++-
 .../components/ExportKeyDialog.tsx            | 53 ++++++++++++++++++-
 4 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/i18n/locales/en/account-settings.json b/i18n/locales/en/account-settings.json
index d9ebb8074..3f1d9754e 100644
--- a/i18n/locales/en/account-settings.json
+++ b/i18n/locales/en/account-settings.json
@@ -66,7 +66,8 @@
       "reveal": {
         "long": "Reveal key",
         "short": "Click to reveal secret key"
-      }
+      },
+      "print": "Print"
     },
     "info": {
       "backup": {
diff --git a/src/Account/components/AccountHeaderCard.tsx b/src/Account/components/AccountHeaderCard.tsx
index f094b6700..2d538d9d0 100644
--- a/src/Account/components/AccountHeaderCard.tsx
+++ b/src/Account/components/AccountHeaderCard.tsx
@@ -32,6 +32,17 @@ const useAccountHeaderStyles = makeStyles({
       marginRight: -12
     }
   },
+  card: {
+    color: "white",
+    position: "relative",
+    background: "transparent",
+    boxShadow: "none",
+    overflow: "visible",
+
+    "@media print": {
+      display: "none"
+    }
+  },
   closeButton: {
     boxSizing: "content-box",
     width: 32,
@@ -129,15 +140,7 @@ function AccountHeaderCard(props: Props) {
   )
 
   return (
-    <Card
-      style={{
-        color: "white",
-        position: "relative",
-        background: "transparent",
-        boxShadow: "none",
-        overflow: "visible"
-      }}
-    >
+    <Card className={classes.card}>
       <CardContent style={isSmallScreen ? { padding: 8 } : undefined}>
         <React.Suspense fallback={null}>
           <AccountTitle
diff --git a/src/Account/components/KeyExportBox.tsx b/src/Account/components/KeyExportBox.tsx
index 37170b08c..8dc28f4f4 100644
--- a/src/Account/components/KeyExportBox.tsx
+++ b/src/Account/components/KeyExportBox.tsx
@@ -1,10 +1,19 @@
 import QRCode from "qrcode.react"
 import React from "react"
 import { useTranslation } from "react-i18next"
+import { makeStyles } from "@material-ui/core"
 import Typography from "@material-ui/core/Typography"
 import { useClipboard } from "~Generic/hooks/userinterface"
 import { Box, VerticalLayout } from "~Layout/components/Box"
 
+const useStyles = makeStyles(() => ({
+  noPrint: {
+    "@media print": {
+      display: "none"
+    }
+  }
+}))
+
 interface Props {
   export: string
   hideTapToCopy?: boolean
@@ -12,6 +21,7 @@ interface Props {
 }
 
 function KeyExportBox(props: Props) {
+  const classes = useStyles()
   const clipboard = useClipboard()
   const copyToClipboard = React.useCallback(() => clipboard.copyToClipboard(props.export), [clipboard, props.export])
   const { t } = useTranslation()
@@ -23,7 +33,11 @@ function KeyExportBox(props: Props) {
           <QRCode size={props.size} value={props.export} />
         </Box>
         <Box margin="16px auto">
-          <Typography align="center" style={{ display: props.hideTapToCopy ? "none" : undefined, marginBottom: 12 }}>
+          <Typography
+            align="center"
+            className={classes.noPrint}
+            style={{ display: props.hideTapToCopy ? "none" : undefined, marginBottom: 12 }}
+          >
             {t("account-settings.export-key.info.tap-to-copy")}:
           </Typography>
           <Typography
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index d18c9e67a..d73dbbe58 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -1,14 +1,18 @@
 import React from "react"
 import { useTranslation } from "react-i18next"
+import Button from "@material-ui/core/Button"
 import InputAdornment from "@material-ui/core/InputAdornment"
 import Typography from "@material-ui/core/Typography"
 import LockIcon from "@material-ui/icons/LockOutlined"
 import LockOpenIcon from "@material-ui/icons/LockOpenOutlined"
 import LockFilledIcon from "@material-ui/icons/Lock"
+import { makeStyles } from "@material-ui/core/styles"
+import PrintIcon from "@material-ui/icons/Print"
 import WarnIcon from "@material-ui/icons/Warning"
 import KeyExportBox from "~Account/components/KeyExportBox"
 import { Account } from "~App/contexts/accounts"
 import { trackError } from "~App/contexts/notifications"
+import ButtonIconLabel from "~Generic/components/ButtonIconLabel"
 import { useIsMobile } from "~Generic/hooks/userinterface"
 import MainTitle from "~Generic/components/MainTitle"
 import PasswordField from "~Generic/components/PasswordField"
@@ -77,7 +81,18 @@ function PromptToReveal(props: PromptToRevealProps) {
   )
 }
 
+const useSecretKeyStyles = makeStyles(() => ({
+  hiddenAccountName: {
+    display: "none",
+
+    "@media print": {
+      display: "block"
+    }
+  }
+}))
+
 interface ShowSecretKeyProps {
+  accountName?: string
   export: string
   onConfirm?: () => void
   title: React.ReactNode
@@ -87,6 +102,8 @@ interface ShowSecretKeyProps {
 function ShowSecretKey(props: ShowSecretKeyProps) {
   const { t } = useTranslation()
 
+  const classes = useSecretKeyStyles()
+
   return (
     <DialogBody
       background={<LockFilledIcon style={{ fontSize: 220 }} />}
@@ -108,6 +125,9 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
           {t("account-settings.export-key.info.secret-key")}
         </Typography>
       ) : null}
+      <Typography align="center" className={classes.hiddenAccountName} variant="h4">
+        {props.accountName ? `"${props.accountName}"` : undefined}
+      </Typography>
       <Box padding={"32px 0 0"}>
         <KeyExportBox export={props.export} hideTapToCopy={props.variant === "initial-backup"} size={192} />
       </Box>
@@ -115,6 +135,14 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
   )
 }
 
+export const useExportKeyDialogStyles = makeStyles(theme => ({
+  noPrint: {
+    "@media print": {
+      display: "none"
+    }
+  }
+}))
+
 interface Props {
   account: Account | null | undefined
   onClose?: () => void
@@ -123,6 +151,8 @@ interface Props {
 }
 
 function ExportKeyDialog(props: Props) {
+  const classes = useExportKeyDialogStyles()
+
   const [password, setPassword] = React.useState("")
   const [passwordError, setPasswordError] = React.useState<Error | null>(null)
   const [isRevealed, setIsRevealed] = React.useState(false)
@@ -159,17 +189,30 @@ function ExportKeyDialog(props: Props) {
     []
   )
 
+  const actions = React.useMemo(() => {
+    return isRevealed ? (
+      <Button className={classes.noPrint} color="primary" onClick={() => window.print()} variant="contained">
+        <ButtonIconLabel label={t("account-settings.export-key.action.print")}>
+          <PrintIcon />
+        </ButtonIconLabel>
+      </Button>
+    ) : (
+      undefined
+    )
+  }, [classes, isRevealed, t])
+
   const titleContent = React.useMemo(
     () =>
       props.variant === "initial-backup" ? null : (
         <MainTitle
+          actions={actions}
           hideBackButton
           onBack={onBackButtonClick}
           style={{ marginBottom: 24 }}
           title={t("account-settings.export-key.title.default")}
         />
       ),
-    [props.variant, onBackButtonClick, t]
+    [actions, props.variant, onBackButtonClick, t]
   )
 
   const backupInfoContent = React.useMemo(
@@ -204,7 +247,13 @@ function ExportKeyDialog(props: Props) {
   )
 
   return isRevealed && secretKey ? (
-    <ShowSecretKey export={secretKey} onConfirm={props.onConfirm} title={titleContent} variant={props.variant} />
+    <ShowSecretKey
+      accountName={props.account?.name}
+      export={secretKey}
+      onConfirm={props.onConfirm}
+      title={titleContent}
+      variant={props.variant}
+    />
   ) : (
     <PromptToReveal
       onReveal={reveal}

From cfe853475f3f4a304023f593a56317d0bfd3c211 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 15 Sep 2020 16:34:01 +0200
Subject: [PATCH 02/16] Add ipc for printing

---
 electron/src/ipc/print.ts                          |  6 ++++++
 shared/ipc.ts                                      |  2 ++
 shared/types/cordova.d.ts                          |  5 +++++
 shared/types/ipc.d.ts                              |  4 ++++
 src/AccountSettings/components/ExportKeyDialog.tsx |  3 ++-
 src/App/cordova/app.cordova.ts                     |  2 ++
 src/App/cordova/print.ts                           | 13 +++++++++++++
 src/Platform/ipc/web.ts                            |  1 +
 src/Platform/print.ts                              |  6 ++++++
 9 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 electron/src/ipc/print.ts
 create mode 100644 src/App/cordova/print.ts
 create mode 100644 src/Platform/print.ts

diff --git a/electron/src/ipc/print.ts b/electron/src/ipc/print.ts
new file mode 100644
index 000000000..d89c5802a
--- /dev/null
+++ b/electron/src/ipc/print.ts
@@ -0,0 +1,6 @@
+import { Messages } from "../shared/ipc"
+import { expose } from "./_ipc"
+
+expose(Messages.Print, () => {
+  window.print()
+})
diff --git a/shared/ipc.ts b/shared/ipc.ts
index a46a7db03..d9d1033cc 100644
--- a/shared/ipc.ts
+++ b/shared/ipc.ts
@@ -15,6 +15,8 @@ export const Messages: IPC.MessageType = {
 
   OpenLink: "OpenLink",
 
+  Print: "Print",
+
   DeepLinkURL: "DeepLinkURL",
 
   CheckUpdateAvailability: "CheckUpdateAvailability",
diff --git a/shared/types/cordova.d.ts b/shared/types/cordova.d.ts
index 2a09ddd51..192180e28 100644
--- a/shared/types/cordova.d.ts
+++ b/shared/types/cordova.d.ts
@@ -114,6 +114,10 @@ interface NotificationPlugin {
   }
 }
 
+interface Printer {
+  print(content?: string, options?: Object, callback?: Function, scope?: Object): void
+}
+
 declare var Fingerprint: Fingerprint
 
 interface CordovaPlugins {
@@ -121,6 +125,7 @@ interface CordovaPlugins {
   clipboard: CordovaClipboard
   notification: NotificationPlugin
   SecureStorage: CordovaSecureStorage
+  printer: Printer
 }
 
 interface Navigator {
diff --git a/shared/types/ipc.d.ts b/shared/types/ipc.d.ts
index 1e864ae94..cc31861f2 100644
--- a/shared/types/ipc.d.ts
+++ b/shared/types/ipc.d.ts
@@ -23,6 +23,8 @@ declare namespace IPC {
 
     OpenLink: "OpenLink"
 
+    Print: "Print"
+
     DeepLinkURL: "DeepLinkURL"
 
     CheckUpdateAvailability: "CheckUpdateAvailability"
@@ -61,6 +63,8 @@ declare namespace IPC {
 
     [Messages.OpenLink]: (href: string) => void
 
+    [Messages.Print]: () => void
+
     [Messages.DeepLinkURL]: () => string
 
     [Messages.CheckUpdateAvailability]: () => boolean
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index d73dbbe58..05a1b132d 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -20,6 +20,7 @@ import { isWrongPasswordError, getErrorTranslation } from "~Generic/lib/errors"
 import { ActionButton, DialogActionsBox } from "~Generic/components/DialogActions"
 import { Box } from "~Layout/components/Box"
 import DialogBody from "~Layout/components/DialogBody"
+import { print } from "~Platform/print"
 
 interface PromptToRevealProps {
   children: React.ReactNode
@@ -191,7 +192,7 @@ function ExportKeyDialog(props: Props) {
 
   const actions = React.useMemo(() => {
     return isRevealed ? (
-      <Button className={classes.noPrint} color="primary" onClick={() => window.print()} variant="contained">
+      <Button className={classes.noPrint} color="primary" onClick={print} variant="contained">
         <ButtonIconLabel label={t("account-settings.export-key.action.print")}>
           <PrintIcon />
         </ButtonIconLabel>
diff --git a/src/App/cordova/app.cordova.ts b/src/App/cordova/app.cordova.ts
index c0a651abd..8f6402519 100644
--- a/src/App/cordova/app.cordova.ts
+++ b/src/App/cordova/app.cordova.ts
@@ -7,6 +7,7 @@ import { Messages } from "~shared/ipc"
 import { trackError } from "./error"
 import { handleMessageEvent, expose } from "./ipc"
 import initializeQRReader from "./qr-reader"
+import initializePrinter from "./print"
 import { getCurrentSettings, initSecureStorage, initKeyStore } from "./storage"
 import { bioAuthenticate, isBiometricAuthAvailable } from "./bio-auth"
 import { registerURLHandler } from "./protocol-handler"
@@ -60,6 +61,7 @@ function onDeviceReady() {
   initializeQRReader()
   initializeClipboard(cordova)
   initializeIPhoneNotchFix()
+  initializePrinter()
 
   setupLinkListener(contentWindow)
   setupBioAuthAvailableHandler()
diff --git a/src/App/cordova/print.ts b/src/App/cordova/print.ts
new file mode 100644
index 000000000..e2a14f0df
--- /dev/null
+++ b/src/App/cordova/print.ts
@@ -0,0 +1,13 @@
+import { expose } from "./ipc"
+import { Messages } from "~shared/ipc"
+
+function print() {
+  return new Promise<void>((resolve, reject) => {
+    cordova.plugins.printer.print()
+    resolve()
+  })
+}
+
+export default function initializePrinter() {
+  expose(Messages.Print, print)
+}
diff --git a/src/Platform/ipc/web.ts b/src/Platform/ipc/web.ts
index fef6cc8b8..804f5c10b 100644
--- a/src/Platform/ipc/web.ts
+++ b/src/Platform/ipc/web.ts
@@ -46,6 +46,7 @@ export function subscribeToMessages<Message extends keyof IPC.MessageType>(
 
 callHandlers[Messages.CopyToClipboard] = (text: string) => (navigator as any).clipboard.writeText(text)
 callHandlers[Messages.OpenLink] = (href: string) => window.open(href, "_blank")
+callHandlers[Messages.Print] = () => window.print()
 
 callHandlers[Messages.CheckUpdateAvailability] = () => false
 callHandlers[Messages.StartUpdate] = () => undefined
diff --git a/src/Platform/print.ts b/src/Platform/print.ts
new file mode 100644
index 000000000..fdaaaae2f
--- /dev/null
+++ b/src/Platform/print.ts
@@ -0,0 +1,6 @@
+import { Messages } from "~shared/ipc"
+import { call } from "./ipc"
+
+export async function print() {
+  return call(Messages.Print)
+}

From 90cedc66ed8a6338bcbebe50c9505e2c87bd769f Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 15 Sep 2020 16:34:12 +0200
Subject: [PATCH 03/16] Add `cordova-plugin-printer`

---
 cordova/package-lock.json | 27 ++++++++++++++++++++-------
 cordova/package.json      |  6 +++++-
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/cordova/package-lock.json b/cordova/package-lock.json
index 835f5ccc0..4483b0e94 100644
--- a/cordova/package-lock.json
+++ b/cordova/package-lock.json
@@ -505,9 +505,9 @@
       }
     },
     "compare-func": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-1.3.2.tgz",
-      "integrity": "sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-1.3.4.tgz",
+      "integrity": "sha512-sq2sWtrqKPkEXAC8tEJA1+BqAH9GbFkGBtUOqrUX57VSfwp8xyktctk+uLoRy5eccTdxzDcVIztlYDpKs3Jv1Q==",
       "requires": {
         "array-ify": "^1.0.0",
         "dot-prop": "^3.0.0"
@@ -728,19 +728,27 @@
       }
     },
     "cordova-ios": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/cordova-ios/-/cordova-ios-5.0.1.tgz",
-      "integrity": "sha512-JcFyDmlyzY2OQJo0eHpuFERFqvO4daHl8HL96RhUVjJVtuoqXHsOF0xTuQSAqIbefelMPEWwY3Lc/dvT4ttTwQ==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/cordova-ios/-/cordova-ios-5.1.1.tgz",
+      "integrity": "sha512-asZMCj44JMe/PMrDIRC97GStPCH+GpaMNVe8hdmu8WWXJzMzRNRRJ339YYU89jitWf9ZKMdyBgrnSnQi5bJ/ZQ==",
       "requires": {
         "cordova-common": "^3.1.0",
         "ios-sim": "^8.0.1",
         "nopt": "^4.0.1",
         "plist": "^3.0.1",
         "q": "^1.5.1",
+        "semver": "^6.3.0",
         "shelljs": "^0.5.3",
         "unorm": "^1.4.1",
         "xcode": "^2.0.0",
         "xml-escape": "^1.1.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
       }
     },
     "cordova-lib": {
@@ -801,7 +809,7 @@
       "integrity": "sha512-RhIBtd5xhD/iLnxjt35jvOae28oNW/wtMZBOmQR3Rf0y4wirvA1bpAZEhBoFqL+rZGhsd6ddOdQXdex1T0DRyQ=="
     },
     "cordova-plugin-customurlscheme": {
-      "version": "git+https://github.com/bytelabsco/Custom-URL-scheme.git#6e393231fb49bbcc8b88e6c41fe606857ca9f44f",
+      "version": "git+https://github.com/bytelabsco/Custom-URL-scheme.git#8a6fad54dd98c109ac377e20cfbffa994d4a173b",
       "from": "git+https://github.com/bytelabsco/Custom-URL-scheme.git"
     },
     "cordova-plugin-device": {
@@ -837,6 +845,11 @@
       "resolved": "https://registry.npmjs.org/cordova-plugin-network-information/-/cordova-plugin-network-information-2.0.2.tgz",
       "integrity": "sha512-NwO3qDBNL/vJxUxBTPNOA1HvkDf9eTeGH8JSZiwy1jq2W2mJKQEDBwqWkaEQS19Yd/MQTiw0cykxg5D7u4J6cQ=="
     },
+    "cordova-plugin-printer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/cordova-plugin-printer/-/cordova-plugin-printer-0.8.0.tgz",
+      "integrity": "sha512-Olu2SuCedztO6PtXoHwA4J/emOxZlj64Ya9aZhcxoXJITG+RDF6Nb3oThcpYPTa73+py+gPF7r19lv3Q8RR/Nw=="
+    },
     "cordova-plugin-safariviewcontroller": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/cordova-plugin-safariviewcontroller/-/cordova-plugin-safariviewcontroller-1.6.0.tgz",
diff --git a/cordova/package.json b/cordova/package.json
index c0f42813a..0de30e456 100644
--- a/cordova/package.json
+++ b/cordova/package.json
@@ -31,7 +31,10 @@
         "ANDROID_PATHPREFIX": "/"
       },
       "cordova-plugin-ionic-keyboard": {},
-      "cordova-plugin-local-notification": {}
+      "cordova-plugin-local-notification": {},
+      "cordova-plugin-printer": {
+        "ANDROID_SUPPORT_V4_VERSION": "28.+"
+      }
     }
   },
   "dependencies": {
@@ -47,6 +50,7 @@
     "cordova-plugin-ionic-keyboard": "^2.2.0",
     "cordova-plugin-local-notification": "^0.9.0-beta.2",
     "cordova-plugin-network-information": "^2.0.1",
+    "cordova-plugin-printer": "^0.8.0",
     "cordova-plugin-safariviewcontroller": "^1.6.0",
     "cordova-plugin-secure-storage": "git+https://github.com/satoshipay/cordova-plugin-secure-storage.git",
     "cordova-plugin-splashscreen": "^5.0.2",

From a2e34e7258aab84ade65d3d1b3680097dc2c668c Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Mon, 21 Sep 2020 11:06:24 +0200
Subject: [PATCH 04/16] Adjust print ipc for cordova and electron

---
 electron/src/ipc/index.ts                     |  1 +
 electron/src/ipc/print.ts                     |  6 +++++-
 .../components/ExportKeyDialog.tsx            | 21 ++++++++++++++-----
 src/App/cordova/print.ts                      | 21 +++++++++++++++----
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/electron/src/ipc/index.ts b/electron/src/ipc/index.ts
index c5b261cf8..3777ea750 100644
--- a/electron/src/ipc/index.ts
+++ b/electron/src/ipc/index.ts
@@ -2,5 +2,6 @@ import "./bio-auth"
 import "./clipboard"
 import "./links"
 import "./notifications"
+import "./print"
 import "./storage"
 import "./updater"
diff --git a/electron/src/ipc/print.ts b/electron/src/ipc/print.ts
index d89c5802a..aa19f554c 100644
--- a/electron/src/ipc/print.ts
+++ b/electron/src/ipc/print.ts
@@ -1,6 +1,10 @@
 import { Messages } from "../shared/ipc"
+import { getOpenWindows } from "../window"
 import { expose } from "./_ipc"
 
 expose(Messages.Print, () => {
-  window.print()
+  const windows = getOpenWindows()
+  if (windows.length) {
+    windows[0].webContents.print()
+  }
 })
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index 05a1b132d..8479b8eca 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -83,7 +83,12 @@ function PromptToReveal(props: PromptToRevealProps) {
 }
 
 const useSecretKeyStyles = makeStyles(() => ({
-  hiddenAccountName: {
+  noPrint: {
+    "@media print": {
+      display: "none"
+    }
+  },
+  onlyPrint: {
     display: "none",
 
     "@media print": {
@@ -110,7 +115,7 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
       background={<LockFilledIcon style={{ fontSize: 220 }} />}
       noMaxWidth
       preventNotchSpacing
-      top={props.title}
+      top={<span className={classes.noPrint}>{props.title}</span>}
       actions={
         props.onConfirm ? (
           <DialogActionsBox desktopStyle={{ marginTop: 32 }} smallDialog>
@@ -126,7 +131,7 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
           {t("account-settings.export-key.info.secret-key")}
         </Typography>
       ) : null}
-      <Typography align="center" className={classes.hiddenAccountName} variant="h4">
+      <Typography align="center" className={classes.onlyPrint} variant="h4">
         {props.accountName ? `"${props.accountName}"` : undefined}
       </Typography>
       <Box padding={"32px 0 0"}>
@@ -190,9 +195,15 @@ function ExportKeyDialog(props: Props) {
     []
   )
 
+  const onPrint = React.useCallback(() => {
+    if (secretKey) {
+      print()
+    }
+  }, [secretKey])
+
   const actions = React.useMemo(() => {
     return isRevealed ? (
-      <Button className={classes.noPrint} color="primary" onClick={print} variant="contained">
+      <Button className={classes.noPrint} color="primary" onClick={onPrint} variant="contained">
         <ButtonIconLabel label={t("account-settings.export-key.action.print")}>
           <PrintIcon />
         </ButtonIconLabel>
@@ -200,7 +211,7 @@ function ExportKeyDialog(props: Props) {
     ) : (
       undefined
     )
-  }, [classes, isRevealed, t])
+  }, [classes, isRevealed, onPrint, t])
 
   const titleContent = React.useMemo(
     () =>
diff --git a/src/App/cordova/print.ts b/src/App/cordova/print.ts
index e2a14f0df..534ffd307 100644
--- a/src/App/cordova/print.ts
+++ b/src/App/cordova/print.ts
@@ -1,13 +1,26 @@
 import { expose } from "./ipc"
 import { Messages } from "~shared/ipc"
 
-function print() {
+function print(content?: string) {
   return new Promise<void>((resolve, reject) => {
-    cordova.plugins.printer.print()
-    resolve()
+    cordova.plugins.printer.print(
+      content,
+      {
+        monochrome: true,
+        paper: {
+          width: "210mm",
+          height: "297mm"
+        },
+        maxHeight: {
+          width: "210mm",
+          height: "297mm"
+        }
+      },
+      resolve
+    )
   })
 }
 
 export default function initializePrinter() {
-  expose(Messages.Print, print)
+  expose(Messages.Print, () => print())
 }

From 49cef4e98729a580b8e6d9018871faff26202dd5 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Mon, 21 Sep 2020 11:26:59 +0200
Subject: [PATCH 05/16] Remove blue stripe shown on top

---
 src/Layout/components/Page.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/Layout/components/Page.tsx b/src/Layout/components/Page.tsx
index b523e5820..79445fe9e 100644
--- a/src/Layout/components/Page.tsx
+++ b/src/Layout/components/Page.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { makeStyles } from "@material-ui/core"
 import { Box, BoxProps } from "./Box"
 import { useIsMobile } from "~Generic/hooks/userinterface"
 import { primaryBackground } from "~App/theme"
@@ -51,8 +52,17 @@ interface SectionProps extends BoxProps {
   top?: boolean
 }
 
+const useStyles = makeStyles(() => ({
+  background: {
+    "@media print": {
+      background: "white !important"
+    }
+  }
+}))
+
 const Section = React.memo(function Section(props: SectionProps) {
   const background = props.brandColored ? primaryBackground : props.backgroundColor || "#fcfcfc"
+  const classes = useStyles()
   const isSmallScreen = useIsMobile()
 
   const padding: React.CSSProperties["padding"] = props.noPadding ? 0 : props.padding !== undefined ? props.padding : 16
@@ -72,7 +82,7 @@ const Section = React.memo(function Section(props: SectionProps) {
   const MaybeInset = props.pageInset ? PageInset : React.Fragment
 
   return (
-    <Box {...props} component="section" padding={padding} style={style}>
+    <Box {...props} className={classes.background} component="section" padding={padding} style={style}>
       {props.top ? <TopOfTopSection background={background} /> : null}
       {/* Add a little padding to the top if window is frameless */}
       {props.top && !isSmallScreen ? <div style={{ width: "100%", padding: "4px 0 0", margin: 0 }} /> : null}

From d3b5a00e828912f2ad684fafc0b81c7ba697cec4 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Mon, 21 Sep 2020 15:23:55 +0200
Subject: [PATCH 06/16] Show print action in initial-backup variant

---
 .../components/ExportKeyDialog.tsx            | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index 8479b8eca..227c459c1 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -118,7 +118,16 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
       top={<span className={classes.noPrint}>{props.title}</span>}
       actions={
         props.onConfirm ? (
-          <DialogActionsBox desktopStyle={{ marginTop: 32 }} smallDialog>
+          <DialogActionsBox className={classes.noPrint} desktopStyle={{ marginTop: 32 }} smallDialog>
+            {props.variant === "initial-backup" ? (
+              <ActionButton onClick={() => print()} type="secondary">
+                <ButtonIconLabel label={t("account-settings.export-key.action.print")}>
+                  <PrintIcon />
+                </ButtonIconLabel>
+              </ActionButton>
+            ) : (
+              undefined
+            )}
             <ActionButton onClick={props.onConfirm} type="primary">
               {t("account-settings.export-key.action.confirm")}
             </ActionButton>
@@ -127,7 +136,13 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
       }
     >
       {props.variant === "initial-backup" ? (
-        <Typography align="center" component="p" variant="h6" style={{ marginTop: -8, marginBottom: 16 }}>
+        <Typography
+          align="center"
+          className={classes.noPrint}
+          component="p"
+          variant="h6"
+          style={{ marginTop: -8, marginBottom: 16 }}
+        >
           {t("account-settings.export-key.info.secret-key")}
         </Typography>
       ) : null}

From b240687f82738195b523cbf6fda9b3ecea322fc0 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Mon, 21 Sep 2020 18:01:50 +0200
Subject: [PATCH 07/16] Add left margin on iOS

---
 shared/types/ipc.d.ts                         |  2 +-
 .../components/ExportKeyDialog.tsx            |  4 +++-
 src/App/cordova/print.ts                      | 20 +++----------------
 src/Platform/print.ts                         |  4 ++--
 4 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/shared/types/ipc.d.ts b/shared/types/ipc.d.ts
index cc31861f2..b60d7a22a 100644
--- a/shared/types/ipc.d.ts
+++ b/shared/types/ipc.d.ts
@@ -63,7 +63,7 @@ declare namespace IPC {
 
     [Messages.OpenLink]: (href: string) => void
 
-    [Messages.Print]: () => void
+    [Messages.Print]: (content: string | undefined, options: object | undefined) => void
 
     [Messages.DeepLinkURL]: () => string
 
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index 227c459c1..80b9911cb 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -212,7 +212,9 @@ function ExportKeyDialog(props: Props) {
 
   const onPrint = React.useCallback(() => {
     if (secretKey) {
-      print()
+      // Add left-margin on ios to fix content content not being centered
+      const options = process.env.PLATFORM === "ios" ? { margin: { left: "2in" } } : {}
+      print(options)
     }
   }, [secretKey])
 
diff --git a/src/App/cordova/print.ts b/src/App/cordova/print.ts
index 534ffd307..4e27442d3 100644
--- a/src/App/cordova/print.ts
+++ b/src/App/cordova/print.ts
@@ -1,26 +1,12 @@
 import { expose } from "./ipc"
 import { Messages } from "~shared/ipc"
 
-function print(content?: string) {
+function print(content?: string, options?: object) {
   return new Promise<void>((resolve, reject) => {
-    cordova.plugins.printer.print(
-      content,
-      {
-        monochrome: true,
-        paper: {
-          width: "210mm",
-          height: "297mm"
-        },
-        maxHeight: {
-          width: "210mm",
-          height: "297mm"
-        }
-      },
-      resolve
-    )
+    cordova.plugins.printer.print(content, options, resolve)
   })
 }
 
 export default function initializePrinter() {
-  expose(Messages.Print, () => print())
+  expose(Messages.Print, (storage, keystore, content, options) => print(content, options))
 }
diff --git a/src/Platform/print.ts b/src/Platform/print.ts
index fdaaaae2f..976fe4b41 100644
--- a/src/Platform/print.ts
+++ b/src/Platform/print.ts
@@ -1,6 +1,6 @@
 import { Messages } from "~shared/ipc"
 import { call } from "./ipc"
 
-export async function print() {
-  return call(Messages.Print)
+export async function print(options?: object, content?: string) {
+  return call(Messages.Print, content, options)
 }

From d70c25a86c061f711c47ed3053a53143549b44e1 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 22 Sep 2020 11:59:08 +0200
Subject: [PATCH 08/16] Set page orientation for printing to landscape

---
 src/App/css/base-styles.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/App/css/base-styles.css b/src/App/css/base-styles.css
index e4a123389..708b6af42 100644
--- a/src/App/css/base-styles.css
+++ b/src/App/css/base-styles.css
@@ -7,6 +7,12 @@ body,
   padding: 0;
 }
 
+@media print {
+  @page {
+    size: A4 landscape;
+  }
+}
+
 body {
   background-color: white;
   color: rgba(0, 0, 0, 0.87);

From c3fedef750772f7497505e9fa3bc55a6874fd719 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 10:24:15 +0200
Subject: [PATCH 09/16] Fix print content on iOS cut off The problem is that
 only the content that is on-screen will be printed and if the phone is in
 portrait mode the qr codes are cut off because the layout is for landscape
 mode Adjusting the width works around this issue

---
 src/index.dev-ios.njk  | 6 ++++++
 src/index.prod-ios.njk | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/index.dev-ios.njk b/src/index.dev-ios.njk
index 79e658904..553a6b1a9 100644
--- a/src/index.dev-ios.njk
+++ b/src/index.dev-ios.njk
@@ -22,6 +22,12 @@
         height: 100vh;
         border: 0;
       }
+
+      @media print {
+        #walletframe {
+          width: 250vw;
+        }
+      }
     </style>
   </head>
   <body>
diff --git a/src/index.prod-ios.njk b/src/index.prod-ios.njk
index c18f4528c..09f77d239 100644
--- a/src/index.prod-ios.njk
+++ b/src/index.prod-ios.njk
@@ -27,6 +27,12 @@
         height: 100vh;
         border: 0;
       }
+
+      @media print {
+        #walletframe {
+          width: 250vw;
+        }
+      }
     </style>
   </head>
   <body>

From 16dea51d177db5fd526fb7f057824e4615112d36 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 11:15:36 +0200
Subject: [PATCH 10/16] Change export-key layout for printing

---
 .../components/ExportKeyDialog.tsx            | 87 ++++++++++++++++---
 1 file changed, 77 insertions(+), 10 deletions(-)

diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index 80b9911cb..4620cd5cf 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import { useTranslation } from "react-i18next"
+import QRCode from "qrcode.react"
 import Button from "@material-ui/core/Button"
 import InputAdornment from "@material-ui/core/InputAdornment"
 import Typography from "@material-ui/core/Typography"
@@ -12,6 +13,7 @@ import WarnIcon from "@material-ui/icons/Warning"
 import KeyExportBox from "~Account/components/KeyExportBox"
 import { Account } from "~App/contexts/accounts"
 import { trackError } from "~App/contexts/notifications"
+import SolarIcon from "~Icons/components/Solar"
 import ButtonIconLabel from "~Generic/components/ButtonIconLabel"
 import { useIsMobile } from "~Generic/hooks/userinterface"
 import MainTitle from "~Generic/components/MainTitle"
@@ -94,21 +96,48 @@ const useSecretKeyStyles = makeStyles(() => ({
     "@media print": {
       display: "block"
     }
+  },
+  printContainer: {
+    paddingTop: 16,
+
+    "@media print": {
+      borderStyle: "groove"
+    }
+  },
+  qrContainer: {
+    padding: 32,
+    display: "block",
+
+    "@media print": {
+      display: "flex",
+      flexDirection: "column"
+    }
+  },
+  qrTitle: {
+    paddingLeft: 8,
+    paddingRight: 8,
+    writingMode: "vertical-lr"
+  },
+  qrTypography: {
+    paddingTop: 16,
+    wordBreak: "break-word",
+    maxWidth: "300px"
   }
 }))
 
 interface ShowSecretKeyProps {
   accountName?: string
-  export: string
+  publicKey?: string
+  secretKey: string
   onConfirm?: () => void
   title: React.ReactNode
   variant: Props["variant"]
 }
 
 function ShowSecretKey(props: ShowSecretKeyProps) {
-  const { t } = useTranslation()
-
   const classes = useSecretKeyStyles()
+  const isSmallScreen = useIsMobile()
+  const { t } = useTranslation()
 
   return (
     <DialogBody
@@ -146,11 +175,40 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
           {t("account-settings.export-key.info.secret-key")}
         </Typography>
       ) : null}
-      <Typography align="center" className={classes.onlyPrint} variant="h4">
-        {props.accountName ? `"${props.accountName}"` : undefined}
-      </Typography>
-      <Box padding={"32px 0 0"}>
-        <KeyExportBox export={props.export} hideTapToCopy={props.variant === "initial-backup"} size={192} />
+      <Box className={classes.noPrint} padding="32px 0 0">
+        <KeyExportBox export={props.secretKey} hideTapToCopy={props.variant === "initial-backup"} size={192} />
+      </Box>
+      <Box className={classes.printContainer}>
+        <Typography align="center" className={classes.onlyPrint} variant="h3">
+          {props.accountName ? `${props.accountName}` : undefined}
+        </Typography>
+        <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", textAlign: "center" }}>
+          {props.publicKey && (
+            <div className={classes.qrContainer}>
+              <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start" }}>
+                <Typography className={classes.qrTitle} variant="h4">
+                  Public Key
+                </Typography>
+                <QRCode value={props.publicKey} size={isSmallScreen ? 200 : 200} />
+              </div>
+              <Typography className={classes.qrTypography}>{props.publicKey}</Typography>
+            </div>
+          )}
+          <div style={{ paddingTop: 60 }}>
+            <SolarIcon style={{ color: "black", width: 80, height: 80 }} />
+            <Typography>Solar Wallet</Typography>
+            <Typography>Paper Backup</Typography>
+          </div>
+          <div className={classes.qrContainer}>
+            <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
+              <QRCode value={props.secretKey} size={isSmallScreen ? 200 : 200} />
+              <Typography className={classes.qrTitle} variant="h4">
+                Secret Key
+              </Typography>
+            </div>
+            <Typography className={classes.qrTypography}>{props.secretKey}</Typography>
+          </div>
+        </div>
       </Box>
     </DialogBody>
   )
@@ -213,7 +271,15 @@ function ExportKeyDialog(props: Props) {
   const onPrint = React.useCallback(() => {
     if (secretKey) {
       // Add left-margin on ios to fix content content not being centered
-      const options = process.env.PLATFORM === "ios" ? { margin: { left: "2in" } } : {}
+      const options =
+        process.env.PLATFORM === "ios"
+          ? {
+              margin: { left: "2in" },
+              pageCount: 1,
+              name: "Paper Wallet Backup",
+              orientation: "landscape"
+            }
+          : {}
       print(options)
     }
   }, [secretKey])
@@ -278,7 +344,8 @@ function ExportKeyDialog(props: Props) {
   return isRevealed && secretKey ? (
     <ShowSecretKey
       accountName={props.account?.name}
-      export={secretKey}
+      secretKey={secretKey}
+      publicKey={props.account?.publicKey}
       onConfirm={props.onConfirm}
       title={titleContent}
       variant={props.variant}

From 64d1ec81b18debff470d1d7f377056bb73470d77 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 11:37:57 +0200
Subject: [PATCH 11/16] Add Solar icon

---
 src/Icons/components/Solar.tsx | 39 ++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/Icons/components/Solar.tsx

diff --git a/src/Icons/components/Solar.tsx b/src/Icons/components/Solar.tsx
new file mode 100644
index 000000000..8743fed50
--- /dev/null
+++ b/src/Icons/components/Solar.tsx
@@ -0,0 +1,39 @@
+import * as React from "react"
+import SvgIcon from "@material-ui/core/SvgIcon"
+
+interface Props {
+  className?: string
+  onClick?: () => void
+  role?: string
+  style?: React.CSSProperties
+}
+
+function SvgComponent(props: Props) {
+  return (
+    <SvgIcon x="0px" y="0px" viewBox="0 0 281.46 281.46" {...props}>
+      <g id="prefix__solar-256">
+        <g id="prefix__Group-14">
+          <path
+            className="prefix__st0"
+            d="M140.73 257.19c-64.22 0-116.46-52.24-116.46-116.46 0-30.94 12.15-59.08 31.91-79.96.92.22 1.87.37 2.86.37 6.78 0 12.27-5.5 12.27-12.27 0-.51-.09-.99-.15-1.49 19.43-14.52 43.51-23.12 69.57-23.12 64.22 0 116.46 52.24 116.46 116.46s-52.25 116.47-116.46 116.47m0-244.46c-28.57 0-54.95 9.37-76.25 25.19-1.65-.82-3.48-1.32-5.45-1.32-6.77 0-12.27 5.49-12.27 12.27 0 1.47.3 2.86.77 4.16-21.57 22.91-34.81 53.75-34.81 87.69 0 70.69 57.3 128 127.99 128s127.99-57.31 127.99-128c.02-70.68-57.29-127.99-127.97-127.99"
+          />
+          <path
+            className="prefix__st0"
+            d="M140.73 229.88c-7.03 0-13.86-.84-20.42-2.39.02-.25.08-.49.08-.75 0-6.78-5.49-12.27-12.27-12.27-3.93 0-7.38 1.88-9.62 4.74-27.91-15.08-46.92-44.61-46.92-78.5 0-49.16 39.99-89.15 89.15-89.15 49.16 0 89.15 39.99 89.15 89.15s-40 89.17-89.15 89.17m0-187.14c-54.12 0-97.98 43.87-97.98 97.98 0 37.98 21.62 70.89 53.22 87.15.58 6.24 5.77 11.14 12.15 11.14 3.24 0 6.17-1.28 8.36-3.34a98.418 98.418 0 0024.25 3.03c54.12 0 97.98-43.87 97.98-97.98 0-54.11-43.87-97.98-97.98-97.98"
+          />
+          <path
+            className="prefix__st0"
+            d="M140.73 203.89c-34.83 0-63.17-28.34-63.17-63.17s28.34-63.16 63.17-63.16c18.25 0 34.72 7.79 46.26 20.21-1.57 2.06-2.53 4.6-2.53 7.39 0 6.78 5.49 12.27 12.27 12.27.89 0 1.76-.11 2.59-.29a62.675 62.675 0 014.58 23.57c-.01 34.85-28.34 63.18-63.17 63.18m64.18-89.64c2.49-2.25 4.09-5.47 4.09-9.08 0-6.77-5.49-12.27-12.27-12.27-1.7 0-3.31.34-4.78.97C179.25 80 161 71.31 140.73 71.31c-38.34 0-69.42 31.08-69.42 69.42s31.08 69.42 69.42 69.42 69.42-31.08 69.42-69.42c0-9.38-1.88-18.32-5.24-26.48"
+          />
+          <path
+            id="prefix__Fill-8"
+            className="prefix__st0"
+            d="M140.73 120.23c-11.32 0-20.5 9.18-20.5 20.5s9.18 20.5 20.5 20.5 20.5-9.18 20.5-20.5c-.01-11.33-9.18-20.5-20.5-20.5"
+          />
+        </g>
+      </g>
+    </SvgIcon>
+  )
+}
+
+export default SvgComponent

From 597ac16ce0ce1b5bc4cd9fc1b19097c6bca4c030 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 11:58:11 +0200
Subject: [PATCH 12/16] Create new component for key backup printing

---
 .../components/ExportKeyDialog.tsx            | 162 ++++++++++--------
 1 file changed, 94 insertions(+), 68 deletions(-)

diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index 4620cd5cf..305e369b8 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -24,6 +24,15 @@ import { Box } from "~Layout/components/Box"
 import DialogBody from "~Layout/components/DialogBody"
 import { print } from "~Platform/print"
 
+const printOptions =
+  process.env.PLATFORM === "ios" || process.env.PLATFORM === "android"
+    ? {
+        name: "Solar Wallet Paper Backup",
+        orientation: "landscape",
+        pageCount: 1
+      }
+    : {}
+
 interface PromptToRevealProps {
   children: React.ReactNode
   password: string
@@ -84,44 +93,103 @@ function PromptToReveal(props: PromptToRevealProps) {
   )
 }
 
-const useSecretKeyStyles = makeStyles(() => ({
-  noPrint: {
-    "@media print": {
-      display: "none"
-    }
+const useBackupPrintStyles = makeStyles(() => ({
+  icon: {
+    color: "black",
+    width: 80,
+    height: 80
   },
-  onlyPrint: {
-    display: "none",
-
-    "@media print": {
-      display: "block"
-    }
+  keyTypography: {
+    paddingTop: 16,
+    wordBreak: "break-word",
+    maxWidth: "300px"
+  },
+  accountName: {
+    paddingTop: 8,
+    marginBottom: 16
   },
   printContainer: {
     paddingTop: 16,
+    paddingBottom: 16,
+    display: "none",
 
     "@media print": {
+      display: "block",
       borderStyle: "groove"
     }
   },
   qrContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    textAlign: "center"
+  },
+  qrWrapper: {
     padding: 32,
-    display: "block",
-
-    "@media print": {
-      display: "flex",
-      flexDirection: "column"
-    }
+    display: "flex",
+    flexDirection: "column"
   },
-  qrTitle: {
+  qrCaption: {
     paddingLeft: 8,
     paddingRight: 8,
     writingMode: "vertical-lr"
-  },
-  qrTypography: {
-    paddingTop: 16,
-    wordBreak: "break-word",
-    maxWidth: "300px"
+  }
+}))
+
+interface BackupPrintContainerProps {
+  accountName?: string
+  publicKey?: string
+  secretKey: string
+}
+
+function BackupPrintContainer(props: BackupPrintContainerProps) {
+  const classes = useBackupPrintStyles()
+
+  return (
+    <Box className={classes.printContainer}>
+      <Typography align="center" className={classes.accountName} variant="h3">
+        {props.accountName ? `${props.accountName}` : undefined}
+      </Typography>
+      <div className={classes.qrContainer}>
+        {props.publicKey && (
+          <div className={classes.qrWrapper}>
+            <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start" }}>
+              <Typography className={classes.qrCaption} variant="h4">
+                Public Key
+              </Typography>
+              <QRCode value={props.publicKey} size={200} />
+            </div>
+            <Typography className={classes.keyTypography}>{props.publicKey}</Typography>
+          </div>
+        )}
+        <div style={{ alignSelf: "center" }}>
+          <SolarIcon className={classes.icon} />
+          <Typography>Solar Wallet</Typography>
+          <Typography>Paper Backup</Typography>
+        </div>
+        <div className={classes.qrWrapper}>
+          <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
+            <QRCode value={props.secretKey} size={200} />
+            <Typography className={classes.qrCaption} variant="h4">
+              Secret Key
+            </Typography>
+          </div>
+          <Typography className={classes.keyTypography}>{props.secretKey}</Typography>
+        </div>
+      </div>
+      <Typography align="center">
+        This is a backup of your account. <br /> Make sure to keep it in a safe place because anyone who has access to
+        it can access your account.
+      </Typography>
+    </Box>
+  )
+}
+
+const useSecretKeyStyles = makeStyles(() => ({
+  noPrint: {
+    "@media print": {
+      display: "none"
+    }
   }
 }))
 
@@ -136,7 +204,6 @@ interface ShowSecretKeyProps {
 
 function ShowSecretKey(props: ShowSecretKeyProps) {
   const classes = useSecretKeyStyles()
-  const isSmallScreen = useIsMobile()
   const { t } = useTranslation()
 
   return (
@@ -149,7 +216,7 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
         props.onConfirm ? (
           <DialogActionsBox className={classes.noPrint} desktopStyle={{ marginTop: 32 }} smallDialog>
             {props.variant === "initial-backup" ? (
-              <ActionButton onClick={() => print()} type="secondary">
+              <ActionButton onClick={() => print(printOptions)} type="secondary">
                 <ButtonIconLabel label={t("account-settings.export-key.action.print")}>
                   <PrintIcon />
                 </ButtonIconLabel>
@@ -178,38 +245,7 @@ function ShowSecretKey(props: ShowSecretKeyProps) {
       <Box className={classes.noPrint} padding="32px 0 0">
         <KeyExportBox export={props.secretKey} hideTapToCopy={props.variant === "initial-backup"} size={192} />
       </Box>
-      <Box className={classes.printContainer}>
-        <Typography align="center" className={classes.onlyPrint} variant="h3">
-          {props.accountName ? `${props.accountName}` : undefined}
-        </Typography>
-        <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", textAlign: "center" }}>
-          {props.publicKey && (
-            <div className={classes.qrContainer}>
-              <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start" }}>
-                <Typography className={classes.qrTitle} variant="h4">
-                  Public Key
-                </Typography>
-                <QRCode value={props.publicKey} size={isSmallScreen ? 200 : 200} />
-              </div>
-              <Typography className={classes.qrTypography}>{props.publicKey}</Typography>
-            </div>
-          )}
-          <div style={{ paddingTop: 60 }}>
-            <SolarIcon style={{ color: "black", width: 80, height: 80 }} />
-            <Typography>Solar Wallet</Typography>
-            <Typography>Paper Backup</Typography>
-          </div>
-          <div className={classes.qrContainer}>
-            <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
-              <QRCode value={props.secretKey} size={isSmallScreen ? 200 : 200} />
-              <Typography className={classes.qrTitle} variant="h4">
-                Secret Key
-              </Typography>
-            </div>
-            <Typography className={classes.qrTypography}>{props.secretKey}</Typography>
-          </div>
-        </div>
-      </Box>
+      <BackupPrintContainer accountName={props.accountName} publicKey={props.publicKey} secretKey={props.secretKey} />
     </DialogBody>
   )
 }
@@ -270,17 +306,7 @@ function ExportKeyDialog(props: Props) {
 
   const onPrint = React.useCallback(() => {
     if (secretKey) {
-      // Add left-margin on ios to fix content content not being centered
-      const options =
-        process.env.PLATFORM === "ios"
-          ? {
-              margin: { left: "2in" },
-              pageCount: 1,
-              name: "Paper Wallet Backup",
-              orientation: "landscape"
-            }
-          : {}
-      print(options)
+      print(printOptions)
     }
   }, [secretKey])
 

From 1e0fca76ea1b4e7a3f55ba332e1ce1c751aa04cc Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 16:40:28 +0200
Subject: [PATCH 13/16] Reduce min height of header card in export view This
 will align the printed content more at the center of the paper

---
 src/Account/components/AccountView.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Account/components/AccountView.tsx b/src/Account/components/AccountView.tsx
index 669c357bb..d515d0981 100644
--- a/src/Account/components/AccountView.tsx
+++ b/src/Account/components/AccountView.tsx
@@ -98,6 +98,7 @@ const AccountPageContent = React.memo(function AccountPageContent(props: Account
   const showBalanceDetails = matchesRoute(router.location.pathname, routes.balanceDetails("*"))
   const showCreatePayment = matchesRoute(router.location.pathname, routes.createPayment("*"))
   const showDeposit = matchesRoute(router.location.pathname, routes.depositAsset("*"))
+  const showExportSecretKey = matchesRoute(router.location.pathname, routes.exportSecretKey("*"), false)
   const showLumenPurchase = matchesRoute(router.location.pathname, routes.purchaseLumens("*"))
   const showReceivePayment = matchesRoute(router.location.pathname, routes.receivePayment("*"))
   const showWithdrawal = matchesRoute(router.location.pathname, routes.withdrawAsset("*"))
@@ -115,15 +116,16 @@ const AccountPageContent = React.memo(function AccountPageContent(props: Account
     testnet: props.testnet
   })
 
-  const headerHeight = showAccountCreation
-    ? isSmallScreen
-      ? 128
-      : 120
-    : isSmallScreen
-    ? 188
-    : showSendReceiveButtons
-    ? 272
-    : 184
+  const headerHeight =
+    showAccountCreation || showExportSecretKey
+      ? isSmallScreen
+        ? 128
+        : 120
+      : isSmallScreen
+      ? 188
+      : showSendReceiveButtons
+      ? 272
+      : 184
 
   const navigateTo = React.useMemo(() => {
     const accountID = props.account?.id

From e80fbc8a6340be61307eba968b718e3c07800422 Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 16:48:33 +0200
Subject: [PATCH 14/16] Replace hard-coded strings

---
 i18n/locales/en/account-settings.json              |  9 +++++++++
 src/AccountSettings/components/ExportKeyDialog.tsx | 11 ++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/i18n/locales/en/account-settings.json b/i18n/locales/en/account-settings.json
index 3f1d9754e..b975f4705 100644
--- a/i18n/locales/en/account-settings.json
+++ b/i18n/locales/en/account-settings.json
@@ -79,6 +79,15 @@
         "paragraph-1": "The secret key backup is the only way to recover your funds if you forget your password or cannot access your device anymore.",
         "paragraph-2": "Write down the key or print it. Keep it in a safe place and do not share it with anyone."
       },
+      "print": {
+        "public-key": "Public Key",
+        "secret-key": "Secret Key",
+        "paper-backup": "Paper Backup",
+        "warning": {
+          "1": "This is a backup of your account.",
+          "2": "Make sure to keep it in a safe place because anyone who has access to it can access your account."
+        }
+      },
       "secret-key": "Write down the key on paper and store it in a safe place.",
       "tap-to-copy": "Tap to copy"
     },
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index 305e369b8..f6021ece5 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -144,6 +144,7 @@ interface BackupPrintContainerProps {
 
 function BackupPrintContainer(props: BackupPrintContainerProps) {
   const classes = useBackupPrintStyles()
+  const { t } = useTranslation()
 
   return (
     <Box className={classes.printContainer}>
@@ -155,7 +156,7 @@ function BackupPrintContainer(props: BackupPrintContainerProps) {
           <div className={classes.qrWrapper}>
             <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-start" }}>
               <Typography className={classes.qrCaption} variant="h4">
-                Public Key
+                {t("account-settings.export-key.info.print.public-key")}
               </Typography>
               <QRCode value={props.publicKey} size={200} />
             </div>
@@ -165,21 +166,21 @@ function BackupPrintContainer(props: BackupPrintContainerProps) {
         <div style={{ alignSelf: "center" }}>
           <SolarIcon className={classes.icon} />
           <Typography>Solar Wallet</Typography>
-          <Typography>Paper Backup</Typography>
+          <Typography>{t("account-settings.export-key.info.print.paper-backup")}</Typography>
         </div>
         <div className={classes.qrWrapper}>
           <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
             <QRCode value={props.secretKey} size={200} />
             <Typography className={classes.qrCaption} variant="h4">
-              Secret Key
+              {t("account-settings.export-key.info.print.secret-key")}
             </Typography>
           </div>
           <Typography className={classes.keyTypography}>{props.secretKey}</Typography>
         </div>
       </div>
       <Typography align="center">
-        This is a backup of your account. <br /> Make sure to keep it in a safe place because anyone who has access to
-        it can access your account.
+        {t("account-settings.export-key.info.print.warning.1")} <br />
+        {t("account-settings.export-key.info.print.warning.2")}
       </Typography>
     </Box>
   )

From bde36e4eef4a7e3da95a46d9d7fbdfe0728a6aab Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Tue, 29 Sep 2020 17:26:38 +0200
Subject: [PATCH 15/16] Use `landscape` option for printing with electron

---
 electron/src/ipc/print.ts                          | 4 ++--
 shared/types/ipc.d.ts                              | 2 +-
 src/AccountSettings/components/ExportKeyDialog.tsx | 2 +-
 src/App/cordova/print.ts                           | 2 +-
 src/Platform/print.ts                              | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/electron/src/ipc/print.ts b/electron/src/ipc/print.ts
index aa19f554c..c4bf5d3c0 100644
--- a/electron/src/ipc/print.ts
+++ b/electron/src/ipc/print.ts
@@ -2,9 +2,9 @@ import { Messages } from "../shared/ipc"
 import { getOpenWindows } from "../window"
 import { expose } from "./_ipc"
 
-expose(Messages.Print, () => {
+expose(Messages.Print, (options?: Electron.WebContentsPrintOptions) => {
   const windows = getOpenWindows()
   if (windows.length) {
-    windows[0].webContents.print()
+    windows[0].webContents.print(options)
   }
 })
diff --git a/shared/types/ipc.d.ts b/shared/types/ipc.d.ts
index b60d7a22a..6b39e4b79 100644
--- a/shared/types/ipc.d.ts
+++ b/shared/types/ipc.d.ts
@@ -63,7 +63,7 @@ declare namespace IPC {
 
     [Messages.OpenLink]: (href: string) => void
 
-    [Messages.Print]: (content: string | undefined, options: object | undefined) => void
+    [Messages.Print]: (options: object | undefined, content: string | undefined) => void
 
     [Messages.DeepLinkURL]: () => string
 
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index f6021ece5..f19eca77e 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -31,7 +31,7 @@ const printOptions =
         orientation: "landscape",
         pageCount: 1
       }
-    : {}
+    : { landscape: true }
 
 interface PromptToRevealProps {
   children: React.ReactNode
diff --git a/src/App/cordova/print.ts b/src/App/cordova/print.ts
index 4e27442d3..e973919c4 100644
--- a/src/App/cordova/print.ts
+++ b/src/App/cordova/print.ts
@@ -8,5 +8,5 @@ function print(content?: string, options?: object) {
 }
 
 export default function initializePrinter() {
-  expose(Messages.Print, (storage, keystore, content, options) => print(content, options))
+  expose(Messages.Print, (storage, keystore, options, content) => print(content, options))
 }
diff --git a/src/Platform/print.ts b/src/Platform/print.ts
index 976fe4b41..e683ec728 100644
--- a/src/Platform/print.ts
+++ b/src/Platform/print.ts
@@ -2,5 +2,5 @@ import { Messages } from "~shared/ipc"
 import { call } from "./ipc"
 
 export async function print(options?: object, content?: string) {
-  return call(Messages.Print, content, options)
+  return call(Messages.Print, options, content)
 }

From 8fd69cbf32fbc1fb8b960db841614be45621dbae Mon Sep 17 00:00:00 2001
From: Marcel Ebert <mail@marcel-ebert.de>
Date: Mon, 9 Nov 2020 16:56:39 +0100
Subject: [PATCH 16/16] Change appearance of key backup sheet

---
 i18n/locales/en/account-settings.json         |  5 +---
 .../components/ExportKeyDialog.tsx            | 24 +++++++++++--------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/i18n/locales/en/account-settings.json b/i18n/locales/en/account-settings.json
index b975f4705..66800d04b 100644
--- a/i18n/locales/en/account-settings.json
+++ b/i18n/locales/en/account-settings.json
@@ -83,10 +83,7 @@
         "public-key": "Public Key",
         "secret-key": "Secret Key",
         "paper-backup": "Paper Backup",
-        "warning": {
-          "1": "This is a backup of your account.",
-          "2": "Make sure to keep it in a safe place because anyone who has access to it can access your account."
-        }
+        "warning": "This is a backup of your Stellar account. Keep it safe at all times. Do not share it with anyone."
       },
       "secret-key": "Write down the key on paper and store it in a safe place.",
       "tap-to-copy": "Tap to copy"
diff --git a/src/AccountSettings/components/ExportKeyDialog.tsx b/src/AccountSettings/components/ExportKeyDialog.tsx
index f19eca77e..33a5ffd58 100644
--- a/src/AccountSettings/components/ExportKeyDialog.tsx
+++ b/src/AccountSettings/components/ExportKeyDialog.tsx
@@ -95,9 +95,10 @@ function PromptToReveal(props: PromptToRevealProps) {
 
 const useBackupPrintStyles = makeStyles(() => ({
   icon: {
-    color: "black",
-    width: 80,
-    height: 80
+    color: "gray",
+    height: 140,
+    width: 140,
+    paddingBottom: 60
   },
   keyTypography: {
     paddingTop: 16,
@@ -125,13 +126,16 @@ const useBackupPrintStyles = makeStyles(() => ({
     textAlign: "center"
   },
   qrWrapper: {
-    padding: 32,
+    padding: "32px 0px",
     display: "flex",
     flexDirection: "column"
   },
   qrCaption: {
+    fontWeight: "bold",
     paddingLeft: 8,
     paddingRight: 8,
+    textTransform: "uppercase",
+    transform: "rotate(180deg)",
     writingMode: "vertical-lr"
   }
 }))
@@ -149,7 +153,7 @@ function BackupPrintContainer(props: BackupPrintContainerProps) {
   return (
     <Box className={classes.printContainer}>
       <Typography align="center" className={classes.accountName} variant="h3">
-        {props.accountName ? `${props.accountName}` : undefined}
+        {props.accountName ? props.accountName : undefined}
       </Typography>
       <div className={classes.qrContainer}>
         {props.publicKey && (
@@ -165,8 +169,6 @@ function BackupPrintContainer(props: BackupPrintContainerProps) {
         )}
         <div style={{ alignSelf: "center" }}>
           <SolarIcon className={classes.icon} />
-          <Typography>Solar Wallet</Typography>
-          <Typography>{t("account-settings.export-key.info.print.paper-backup")}</Typography>
         </div>
         <div className={classes.qrWrapper}>
           <div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end" }}>
@@ -178,9 +180,11 @@ function BackupPrintContainer(props: BackupPrintContainerProps) {
           <Typography className={classes.keyTypography}>{props.secretKey}</Typography>
         </div>
       </div>
-      <Typography align="center">
-        {t("account-settings.export-key.info.print.warning.1")} <br />
-        {t("account-settings.export-key.info.print.warning.2")}
+      <Typography align="center" color="textSecondary" variant="h6">
+        {t("account-settings.export-key.info.print.warning")}
+      </Typography>
+      <Typography align="center" style={{ color: "#00000066", fontSize: "150%" }} variant="body1">
+        solarwallet.io
       </Typography>
     </Box>
   )