From bb27570a90693cf6b6e735fd599770387848bd2e Mon Sep 17 00:00:00 2001 From: William Grant Date: Fri, 10 May 2024 12:54:36 +1000 Subject: [PATCH] fix: make qr code update correctly if theme changes even if visible, there is some flickering with the logo that I have been unable to fix. --- images/session/qr/brand.svg | 2 +- images/session/qr/shield.svg | 2 +- ts/components/SessionQRCode.tsx | 74 +++++++++------ ts/components/dialog/EditProfileDialog.tsx | 1 + ts/components/dialog/SessionSeedModal.tsx | 1 + .../section/CategoryRecoveryPassword.tsx | 91 ++++++++++--------- 6 files changed, 95 insertions(+), 76 deletions(-) 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',