Zoom in/zoom out QR Code

Author: ShahanaFarooqui

apps/frontend/src/components/App/App.tsx

@@ -12,6 +12,7 @@ import RouteTransition from '../ui/RouteTransition/RouteTransition';
 import { useSelector } from 'react-redux';
 import { selectAppMode, selectIsAuthenticated, selectIsDarkMode } from '../../store/rootSelectors';
 import SQLTerminal from '../modals/SQLTerminal/SQLTerminal';
+import QRCodeLarge from '../modals/QRCodeLarge/QRCodeLarge';
 
 export const App = () => {
   const currentScreenSize = useBreakpoint();
@@ -37,6 +38,7 @@ export const App = () => {
       <ToastMessage />
       <NodeInfo />
       <ConnectWallet />
+      <QRCodeLarge />
       <LoginComponent />
       <LogoutComponent />
       <SetPasswordComponent />

apps/frontend/src/components/modals/QRCodeLarge/QRCodeLarge.scss

@@ -0,0 +1,18 @@
+@import '../../../styles/constants.scss';
+
+.qr-container-large {
+  position: relative;
+  width: 440px;
+  padding-bottom: 1rem;
+  cursor: zoom-out;
+  & .qr-cln-logo {
+    position: absolute;
+    top: 40%;
+    left: 44%;
+    padding: 0;
+    border-radius: 50%;
+    width: 3.5rem;
+    height: 3.5rem;
+    border: 3px solid $white;
+  }
+}

apps/frontend/src/components/modals/QRCodeLarge/QRCodeLarge.test.tsx

@@ -0,0 +1,87 @@
+import React, { act } from 'react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import { mockBKPRStoreData, mockCLNStoreData, mockRootStoreData, mockShowModals } from '../../../utilities/test-utilities/mockData';
+import { renderWithProviders } from '../../../utilities/test-utilities/mockStore';
+import ConnectWallet from '../ConnectWallet/ConnectWallet';
+import { APP_ANIMATION_DURATION } from '../../../utilities/constants';
+
+describe('QRCodeLarge Component', () => {
+  const customMockStore = {
+    root: {
+      ...mockRootStoreData,
+      showModals: {
+        ...mockShowModals,
+        connectWalletModal: true,
+      }
+    },
+    cln: mockCLNStoreData,
+    bkpr: mockBKPRStoreData
+  };
+
+  it('renders without crashing', async () => {
+    await renderWithProviders(<ConnectWallet />, { preloadedState: customMockStore });
+    const QRContainer = screen.getByTestId('qr-container');
+    expect(QRContainer).toBeInTheDocument();
+    const QRCanvas = QRContainer.querySelector('canvas');
+    expect(QRCanvas).toBeInTheDocument();
+    await act(async () => {
+      if (QRCanvas) {
+        fireEvent.click(QRCanvas);
+      } else {
+        fail('QR Canvas not found');
+      }
+    });
+    await act(async () => jest.advanceTimersByTime(APP_ANIMATION_DURATION * 2 * 1000));
+    expect(screen.getByTestId('qr-code-large')).toBeInTheDocument();
+    const qrContainerLarge = screen.getByTestId('qr-container-large');
+    const qrCanvasLarge = qrContainerLarge.querySelector('canvas');
+    expect(qrCanvasLarge).toHaveAttribute('width', '440');
+  });
+
+  it('uses the correct connection URL for the QR code', async () => {
+    await renderWithProviders(<ConnectWallet />, { preloadedState: customMockStore });
+    const QRContainer = screen.getByTestId('qr-container');
+    expect(QRContainer).toBeInTheDocument();
+    const QRCanvas = QRContainer.querySelector('canvas');
+    expect(QRCanvas).toBeInTheDocument();
+    await act(async () => {
+      if (QRCanvas) {
+        fireEvent.click(QRCanvas);
+      } else {
+        fail('QR Canvas not found');
+      }
+    });
+    await act(async () => jest.advanceTimersByTime(APP_ANIMATION_DURATION * 1000));
+    const qrContainerLarge = screen.getByTestId('qr-container-large');
+    const url = qrContainerLarge.getAttribute('data-key');
+    expect(url).toContain(mockRootStoreData.connectionUrl);
+  });
+
+  it('dispatches correct action when close button is clicked', async () => {
+    const { getActions } = await renderWithProviders(<ConnectWallet />, { preloadedState: customMockStore });
+    const QRContainer = screen.getByTestId('qr-container');
+    expect(QRContainer).toBeInTheDocument();
+    const QRCanvas = QRContainer.querySelector('canvas');
+    expect(QRCanvas).toBeInTheDocument();
+    await act(async () => {
+      if (QRCanvas) {
+        fireEvent.click(QRCanvas);
+      } else {
+        fail('QR Canvas not found');
+      }
+    });
+    await act(async () => jest.advanceTimersByTime(APP_ANIMATION_DURATION * 1000));
+
+    const modalCloseButton = screen.getByTestId('modal-close');
+    fireEvent.click(modalCloseButton);
+
+    await waitFor(() => {
+      expect(getActions().some(action =>
+        action.type === 'root/setShowModals' &&
+        action.payload.connectWalletModal === true &&
+        action.payload.qrCodeLarge === false
+      )).toBe(true);
+    });
+  });
+
+});

apps/frontend/src/components/modals/QRCodeLarge/QRCodeLarge.tsx

@@ -0,0 +1,49 @@
+import './QRCodeLarge.scss';
+import { motion, AnimatePresence } from 'framer-motion';
+import { QRCodeCanvas } from 'qrcode.react';
+import { Modal, Row } from 'react-bootstrap';
+
+import { CloseSVG } from '../../../svgs/Close';
+import { setShowModals } from '../../../store/rootSlice';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectConnectionUrl, selectIsDarkMode, selectShowModals } from '../../../store/rootSelectors';
+
+const QRCodeLarge = () => {
+  const dispatch = useDispatch();
+  const isDarkMode = useSelector(selectIsDarkMode);
+  const showModals = useSelector(selectShowModals);
+  const connectionUrl = useSelector(selectConnectionUrl);
+
+  const closeHandler = () => {
+    dispatch(setShowModals({ ...showModals, connectWalletModal: true, qrCodeLarge: false }));
+  }
+
+  return (
+    <>
+      <Modal show={showModals.qrCodeLarge} onHide={closeHandler} centered className='modal-lg' data-testid='qr-code-large'>
+        <Modal.Header className='d-flex align-items-start justify-content-end pb-0 border-0'>
+          <span data-testid='modal-close' className='span-close-svg' onClick={closeHandler}><CloseSVG /></span>
+        </Modal.Header>
+        <Modal.Body className='p-0'>
+          <Row className='qr-container-large m-auto d-flex' data-testid='qr-container-large' data-key={connectionUrl}>
+            <AnimatePresence>
+              <motion.img
+                key='cln-logo'
+                alt='Core Lightning Logo'
+                src={isDarkMode ? '/images/cln-logo-dark.png' : '/images/cln-logo-light.png'}
+                onClick={closeHandler}
+                className='qr-cln-logo'
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.05, duration: 0.01 }}
+              />
+            </AnimatePresence>
+            <QRCodeCanvas onClick={closeHandler} value={connectionUrl} size={440} includeMargin={true} bgColor={isDarkMode ? '#0C0C0F' : '#FFFFFF'} fgColor={isDarkMode ? '#FFFFFF' : '#000000'} />
+          </Row>
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default QRCodeLarge;