Merge pull request #2680 from yougotwill/save_qr_code

feat: added ability to save qr codes on click

ts/components/dialog/EditProfileDialog.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react';
+import React, { ChangeEvent, MouseEvent } from 'react';
 import { QRCode } from 'react-qr-svg';
 
 import { Avatar, AvatarSize } from '../avatar/Avatar';
@@ -21,29 +21,45 @@ import { sanitizeSessionUsername } from '../../session/utils/String';
 import { setLastProfileUpdateTimestamp } from '../../util/storage';
 import { ConversationTypeEnum } from '../../models/conversationAttributes';
 import { MAX_USERNAME_BYTES } from '../../session/constants';
+import styled from 'styled-components';
+import { saveQRCode } from '../../util/saveQRCode';
 
-interface State {
+const handleSaveQRCode = (event: MouseEvent) => {
-  profileName: string;
+  event.preventDefault();
-  updatedProfileName: string;
+  saveQRCode('session-id', '220px', '220px', 'var(--white-color)', 'var(--black-color)');
-  oldAvatarPath: string;
+};
-  newAvatarObjectUrl: string | null;
+
-  mode: 'default' | 'edit' | 'qr';
+const StyledQRView = styled.div`
-  loading: boolean;
+  cursor: pointer;
-}
+`;
 
 const QRView = ({ sessionID }: { sessionID: string }) => {
   return (
-    <div className="qr-image">
+    <StyledQRView
+      aria-label={window.i18n('clickToTrustContact')}
+      title={window.i18n('clickToTrustContact')}
+      className="qr-image"
+      onClick={handleSaveQRCode}
+    >
       <QRCode
         value={sessionID}
         bgColor="var(--white-color)"
         fgColor="var(--black-color)"
         level="L"
       />
-    </div>
+    </StyledQRView>
   );
 };
 
+interface State {
+  profileName: string;
+  updatedProfileName: string;
+  oldAvatarPath: string;
+  newAvatarObjectUrl: string | null;
+  mode: 'default' | 'edit' | 'qr';
+  loading: boolean;
+}
+
 export class EditProfileDialog extends React.Component<{}, State> {
   private readonly convo: ConversationModel;
 

ts/components/dialog/SessionSeedModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { MouseEvent, useEffect, useState } from 'react';
 
 import { ToastUtils } from '../../session/utils';
 import { matchesHash } from '../../util/passwordUtils';
@@ -12,6 +12,7 @@ import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/S
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { getCurrentRecoveryPhrase } from '../../util/storage';
 import styled from 'styled-components';
+import { saveQRCode } from '../../util/saveQRCode';
 
 interface PasswordProps {
   setPasswordValid: (val: boolean) => any;
@@ -90,15 +91,25 @@ interface SeedProps {
   onClickCopy?: () => any;
 }
 
-const StyledRecoveryPhrase = styled.i`
+const StyledRecoveryPhrase = styled.i``;
-  margin-bottom: var(--margins-md);
-`;
 
 const StyledQRImage = styled.div`
   width: fit-content;
-  margin: 0 auto;
+  margin: 0 auto var(--margins-lg);
+  cursor: pointer;
 `;
 
+const handleSaveQRCode = (event: MouseEvent) => {
+  event.preventDefault();
+  saveQRCode(
+    'session-recovery-phrase',
+    '220px',
+    '220px',
+    'var(--white-color)',
+    'var(--black-color)'
+  );
+};
+
 const Seed = (props: SeedProps) => {
   const { recoveryPhrase, onClickCopy } = props;
   const i18n = window.i18n;
@@ -132,6 +143,15 @@ const Seed = (props: SeedProps) => {
           {i18n('recoveryPhraseSavePromptMain')}
         </p>
 
+        <StyledQRImage
+          aria-label={window.i18n('clickToTrustContact')}
+          title={window.i18n('clickToTrustContact')}
+          className="qr-image"
+          onClick={handleSaveQRCode}
+        >
+          <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
+        </StyledQRImage>
+
         <StyledRecoveryPhrase
           data-testid="recovery-phrase-seed-modal"
           className="session-modal__text-highlight"
@@ -139,9 +159,6 @@ const Seed = (props: SeedProps) => {
           {recoveryPhrase}
         </StyledRecoveryPhrase>
       </div>
-      <StyledQRImage className="qr-image">
-        <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
-      </StyledQRImage>
       <div
         className="session-modal__button-group"
         style={{ justifyContent: 'center', width: '100%' }}

ts/components/leftpane/conversation-list-item/HeaderItem.tsx

@@ -173,7 +173,9 @@ export const ConversationListItemHeaderItem = () => {
     ) : null;
     unreadCountDiv = (
       <p className="module-conversation-list-item__unread-count">
-        {unreadCount > CONVERSATION.MAX_UNREAD_COUNT ? `${CONVERSATION.MAX_UNREAD_COUNT}+` : unreadCount}
+        {unreadCount > CONVERSATION.MAX_UNREAD_COUNT
+          ? `${CONVERSATION.MAX_UNREAD_COUNT}+`
+          : unreadCount}
       </p>
     );
   }

ts/util/saveQRCode.ts

@@ -0,0 +1,29 @@
+import { saveURLAsFile } from './saveURLAsFile';
+
+export function saveQRCode(
+  filename: string,
+  width: string,
+  height: string,
+  backgroundColor: string,
+  foregroundColor: string
+): void {
+  const qrSVG = document.querySelector('.qr-image svg');
+  if (qrSVG) {
+    // tslint:disable-next-line: no-http-string
+    qrSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    qrSVG.setAttribute('width', width);
+    qrSVG.setAttribute('height', height);
+    let content = qrSVG.outerHTML;
+    content = content.replaceAll(backgroundColor, 'white');
+    content = content.replaceAll(foregroundColor, 'black');
+    const file = new Blob([content], { type: 'text/plain' });
+    const url = URL.createObjectURL(file);
+    saveURLAsFile({
+      filename: `${filename}-${new Date().toISOString()}.svg`,
+      url,
+      document,
+    });
+  } else {
+    window.log.info('[saveQRCode] QR code not found');
+  }
+}