diff --git a/images/session/qr/brand.svg b/images/session/qr/brand.svg
index cbe4ed2ca..f54264a60 100644
--- a/images/session/qr/brand.svg
+++ b/images/session/qr/brand.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/session/qr/shield.svg b/images/session/qr/shield.svg
index edf943949..7272b6baa 100644
--- a/images/session/qr/shield.svg
+++ b/images/session/qr/shield.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ts/components/SessionQRCode.tsx b/ts/components/SessionQRCode.tsx
index 99897af33..c4b131c49 100644
--- a/ts/components/SessionQRCode.tsx
+++ b/ts/components/SessionQRCode.tsx
@@ -1,5 +1,5 @@
import { isEmpty } from 'lodash';
-import { CSSProperties, MouseEvent, useState } from 'react';
+import { CSSProperties, MouseEvent, useCallback, useEffect, useState } from 'react';
import { QRCode } from 'react-qrcode-logo';
import useMount from 'react-use/lib/useMount';
import styled from 'styled-components';
@@ -18,11 +18,9 @@ const StyledQRView = styled(AnimatedFlex)<{
cursor: pointer;
border-radius: 10px;
overflow: hidden;
- padding: 10px;
- width: fit-content;
- height: auto;
${props => props.backgroundColor && ` background-color: ${props.backgroundColor}`};
+ ${props => props.size && `width: ${props.size + 20}px; height: ${props.size + 20}px; }`}
${props =>
props.canvasId &&
props.size &&
@@ -39,8 +37,9 @@ export type SessionQRCodeProps = {
logoWidth?: number;
logoHeight?: number;
logoIsSVG?: boolean;
- style?: CSSProperties;
+ theme?: string;
ignoreTheme?: boolean;
+ style?: CSSProperties;
};
export function SessionQRCode(props: SessionQRCodeProps) {
@@ -54,39 +53,52 @@ export function SessionQRCode(props: SessionQRCodeProps) {
logoWidth,
logoHeight,
logoIsSVG,
- style,
+ theme,
ignoreTheme,
+ style,
} = props;
const [svgDataURL, setSvgDataURL] = useState('');
- // Saving the QR code uses a separate react instance without the redux store so we don't use a selector here
- const theme = window.Events.getThemeSetting();
+ const [currentTheme, setCurrentTheme] = useState(theme);
+ const [loading, setLoading] = useState(false);
- useMount(() => {
- if (logoImage && logoIsSVG && isEmpty(svgDataURL)) {
- // eslint-disable-next-line more/no-then
- fetch(logoImage)
- .then(response => response.text())
- .then(response => {
- const svgString = ignoreTheme
- ? response
- : response.replaceAll(
- 'black',
- getThemeValue(
- theme.includes('dark') ? '--background-primary-color' : '--text-primary-color'
- )
- );
- setSvgDataURL(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`);
- })
- .catch(error =>
- window.log.error('Error fetching the QR Code logo which is an svg:', error)
+ const loadLogoImage = useCallback(async () => {
+ if (logoImage && logoIsSVG) {
+ setLoading(true);
+ try {
+ const response = await fetch(logoImage);
+ let svgString = await response.text();
+
+ if (!ignoreTheme && theme && !isEmpty(theme)) {
+ svgString = svgString.replaceAll(
+ 'black',
+ getThemeValue(
+ theme.includes('dark') ? '--background-primary-color' : '--text-primary-color'
+ )
+ );
+ }
+
+ setSvgDataURL(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`);
+ window.log.debug(
+ `WIP: [SessionQRCode] SVG logo fetched: ${logoImage} data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`
);
+ } catch (error) {
+ window.log.error('Error fetching the QR Code logo which is an svg:', error);
+ }
+ setLoading(false);
}
+ }, [ignoreTheme, logoImage, logoIsSVG, theme]);
+
+ useMount(() => {
+ void loadLogoImage();
});
- if (logoImage && logoIsSVG && isEmpty(svgDataURL)) {
- return null;
- }
+ useEffect(() => {
+ if (theme && theme !== currentTheme) {
+ setCurrentTheme(theme);
+ void loadLogoImage();
+ }
+ }, [currentTheme, loadLogoImage, theme]);
const qrCanvasSize = 1000;
const canvasLogoWidth =
@@ -96,6 +108,8 @@ export function SessionQRCode(props: SessionQRCodeProps) {
return (
diff --git a/ts/components/dialog/EditProfileDialog.tsx b/ts/components/dialog/EditProfileDialog.tsx
index 0b397c62b..fcabbd429 100644
--- a/ts/components/dialog/EditProfileDialog.tsx
+++ b/ts/components/dialog/EditProfileDialog.tsx
@@ -38,6 +38,7 @@ const QRView = ({ sessionID }: { sessionID: string }) => {
logoWidth={40}
logoHeight={40}
logoIsSVG={true}
+ theme={theme}
/>
);
};
diff --git a/ts/components/dialog/SessionSeedModal.tsx b/ts/components/dialog/SessionSeedModal.tsx
index c0b4e8dec..e1cbdc709 100644
--- a/ts/components/dialog/SessionSeedModal.tsx
+++ b/ts/components/dialog/SessionSeedModal.tsx
@@ -68,6 +68,7 @@ const Seed = (props: SeedProps) => {
logoWidth={56}
logoHeight={56}
logoIsSVG={true}
+ theme={theme}
style={{ margin: '0 auto var(--margins-lg)' }}
/>
diff --git a/ts/components/settings/section/CategoryRecoveryPassword.tsx b/ts/components/settings/section/CategoryRecoveryPassword.tsx
index c0ec3e4d7..c8a5c30d5 100644
--- a/ts/components/settings/section/CategoryRecoveryPassword.tsx
+++ b/ts/components/settings/section/CategoryRecoveryPassword.tsx
@@ -88,50 +88,51 @@ export const SettingsCategoryRecoveryPassword = () => {
inline={false}
>
-
- {recoveryPhrase}
-
- {
- if (isEmpty(recoveryPhrase)) {
- return;
- }
- copyRecoveryPhrase(recoveryPhrase);
- }}
+ {isQRVisible ? (
+
-
-
+ ) : (
+
+ {recoveryPhrase}
+
+ {
+ if (isEmpty(recoveryPhrase)) {
+ return;
+ }
+ copyRecoveryPhrase(recoveryPhrase);
+ }}
+ />
+
+ )}
{
iconType={isQRVisible ? 'password' : 'qr'}
iconSize={isQRVisible ? 48 : 'huge'}
iconColor={'var(--text-primary-color)'}
- onClick={() => setIsQRVisible(!isQRVisible)}
+ onClick={() => {
+ setIsQRVisible(!isQRVisible);
+ }}
padding="0"
style={{
display: 'flex',