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