From 6a998111c747032dfc7ccf190b1c8be73377e6c4 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 1 Mar 2021 18:13:12 +1100
Subject: [PATCH] add a qrcode to scan mnemonic/seed in dialog

---
 stylesheets/_modal.scss                    |  9 ++++++++-
 ts/components/session/SessionSeedModal.tsx | 13 ++++++++++++-
 ts/models/conversation.ts                  |  9 +++++----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
index ab3bcf8eb..a4419bac1 100644
--- a/stylesheets/_modal.scss
+++ b/stylesheets/_modal.scss
@@ -161,6 +161,14 @@
     padding: 20px 0;
     font-style: oblique;
   }
+
+  .qr-image {
+    transition: $session-transition-duration;
+    opacity: 10%;
+    &:hover {
+      opacity: 100%;
+    }
+  }
 }
 
 .permissions-popup,
@@ -225,7 +233,6 @@
       height: 26px;
       width: 26px;
       border-radius: 50%;
-      padding-top: 3px;
       background-color: $session-color-white;
       transition: $session-transition-duration;
 
diff --git a/ts/components/session/SessionSeedModal.tsx b/ts/components/session/SessionSeedModal.tsx
index 0ceee7888..27f45d41c 100644
--- a/ts/components/session/SessionSeedModal.tsx
+++ b/ts/components/session/SessionSeedModal.tsx
@@ -6,6 +6,7 @@ import { ToastUtils, UserUtils } from '../../session/utils';
 import { DefaultTheme, withTheme } from 'styled-components';
 import { PasswordUtil } from '../../util';
 import { getPasswordHash } from '../../data/data';
+import { QRCode } from 'react-qr-svg';
 
 interface Props {
   onClose: any;
@@ -113,6 +114,8 @@ class SessionSeedModalInner extends React.Component<Props, State> {
 
   private renderSeedView() {
     const i18n = window.i18n;
+    const bgColor = '#FFFFFF';
+    const fgColor = '#1B1B1B';
 
     return (
       <>
@@ -127,7 +130,15 @@ class SessionSeedModalInner extends React.Component<Props, State> {
           </i>
         </div>
         <div className="spacer-lg" />
-
+        <div className="qr-image">
+          <QRCode
+            value={this.state.recoveryPhrase}
+            bgColor={bgColor}
+            fgColor={fgColor}
+            level="L"
+          />
+        </div>
+        <div className="spacer-lg" />
         <div className="session-modal__button-group">
           <SessionButton
             text={i18n('copy')}
diff --git a/ts/models/conversation.ts b/ts/models/conversation.ts
index efe5a9440..df05fc977 100644
--- a/ts/models/conversation.ts
+++ b/ts/models/conversation.ts
@@ -635,11 +635,13 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       conversationId: this.id,
     });
   }
-  public async sendMessageJob(message: MessageModel) {
+  public async sendMessageJob(
+    message: MessageModel,
+    expireTimer: number | undefined
+  ) {
     try {
       const uploads = await message.uploadData();
       const { id } = message;
-      const expireTimer = this.get('expireTimer');
       const destination = this.id;
 
       const sentAt = message.get('sent_at');
@@ -809,9 +811,8 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
       await model.saveErrors([error]);
       return null;
     }
-
     this.queueJob(async () => {
-      await this.sendMessageJob(model);
+      await this.sendMessageJob(model, expireTimer);
     });
     return null;
   }