Add button for printing secretkey backup sheet

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",

electron/src/ipc/index.ts

@@ -2,5 +2,6 @@ import "./bio-auth"
 import "./clipboard"
 import "./links"
 import "./notifications"
+import "./print"
 import "./storage"
 import "./updater"

electron/src/ipc/print.ts

@@ -0,0 +1,10 @@
+import { Messages } from "../shared/ipc"
+import { getOpenWindows } from "../window"
+import { expose } from "./_ipc"
+
+expose(Messages.Print, (options?: Electron.WebContentsPrintOptions) => {
+  const windows = getOpenWindows()
+  if (windows.length) {
+    windows[0].webContents.print(options)
+  }
+})

i18n/locales/en/account-settings.json

@@ -66,7 +66,8 @@
       "reveal": {
         "long": "Reveal key",
         "short": "Click to reveal secret key"
-      }
+      },
+      "print": "Print"
     },
     "info": {
       "backup": {
@@ -78,6 +79,12 @@
         "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": "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"
     },

shared/ipc.ts

@@ -15,6 +15,8 @@ export const Messages: IPC.MessageType = {
 
   OpenLink: "OpenLink",
 
+  Print: "Print",
+
   DeepLinkURL: "DeepLinkURL",
 
   CheckUpdateAvailability: "CheckUpdateAvailability",

shared/types/cordova.d.ts

@@ -114,13 +114,18 @@ interface NotificationPlugin {
   }
 }
 
+interface Printer {
+  print(content?: string, options?: Object, callback?: Function, scope?: Object): void
+}
+
 declare var Fingerprint: Fingerprint
 
 interface CordovaPlugins {
   barcodeScanner: BarcodeScanner
   clipboard: CordovaClipboard
   notification: NotificationPlugin
   SecureStorage: CordovaSecureStorage
+  printer: Printer
 }
 
 interface Navigator {

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]: (options: object | undefined, content: string | undefined) => void
+
     [Messages.DeepLinkURL]: () => string
 
     [Messages.CheckUpdateAvailability]: () => boolean

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

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

src/Account/components/KeyExportBox.tsx

@@ -1,17 +1,27 @@
 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
   size: number
 }
 
 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