Added QR code

ui/components/institutional/qr-code-modal/index.js

@@ -0,0 +1 @@
+export { default } from './qr-code-modal';

ui/components/institutional/qr-code-modal/qr-code-modal.js

@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import QRCode from 'qrcode.react';
+import { Modal, ModalOverlay, Text, Box } from '../../component-library';
+import { ModalContent } from '../../component-library/modal-content/modal-content';
+import { ModalHeader } from '../../component-library/modal-header/modal-header';
+import {
+  TextColor,
+  TextVariant,
+} from '../../../helpers/constants/design-system';
+import { I18nContext } from '../../../contexts/i18n';
+import Spinner from '../../ui/spinner';
+
+export default function QRCodeModal({ onClose, custodianName }) {
+  const t = useContext(I18nContext);
+  const [publicKeyData, setPublicKeyData] = useState(null);
+  const [error, setError] = useState('');
+
+  async function generatePublicKey() {
+    try {
+      const { publicKey } = await window.crypto.subtle.generateKey(
+        {
+          name: 'RSA-OAEP',
+          modulusLength: 2048,
+          publicExponent: new Uint8Array([0x01, 0x00, 0x01]),
+          hash: 'SHA-256',
+        },
+        true,
+        ['encrypt', 'decrypt'],
+      );
+
+      const exportedPublicKey = await window.crypto.subtle.exportKey(
+        'spki',
+        publicKey,
+      );
+
+      const publicKeyBase64 = Buffer.from(exportedPublicKey)
+        .toString('base64')
+        .replace(/\+/gu, '-')
+        .replace(/\//gu, '_')
+        .replace(/[=]+$/u, '');
+
+      setPublicKeyData(publicKeyBase64);
+    } catch (e) {
+      console.error('Error generating public key:', e);
+      setError('Error generating public key. Please try again.');
+    }
+  }
+
+  useEffect(() => {
+    generatePublicKey();
+  }, []);
+
+  const qrCodeValue = JSON.stringify({
+    custodianName,
+    publicKey: publicKeyData,
+  });
+
+  return (
+    <Modal isOpen onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader onClose={onClose}>
+          {t('connectCustodianAccounts', [custodianName || 'custodian'])}
+        </ModalHeader>
+        <Text
+          as="p"
+          paddingRight={10}
+          paddingLeft={10}
+          paddingBottom={4}
+          color={TextColor.textDefault}
+          variant={TextVariant.bodySm}
+        >
+          {t('custodianQRCodeScan')}
+        </Text>
+        {error && <Text color={TextColor.error}>{error}</Text>}
+        {publicKeyData === null && (
+          <Spinner color="var(--color-warning-default)" />
+        )}
+        {publicKeyData && (
+          <Box
+            style={{
+              padding: 20,
+              backgroundColor: 'var(--qr-code-white-background)',
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: 'column',
+            }}
+          >
+            <QRCode value={qrCodeValue} size={270} />
+          </Box>
+        )}
+      </ModalContent>
+    </Modal>
+  );
+}
+
+QRCodeModal.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  custodianName: PropTypes.string.isRequired,
+};

ui/pages/institutional/custody/custody.js

@@ -55,8 +55,10 @@ import PulseLoader from '../../../components/ui/pulse-loader/pulse-loader';
 import ConfirmConnectCustodianModal from '../confirm-connect-custodian-modal';
 import { findCustodianByEnvName } from '../../../helpers/utils/institutional/find-by-custodian-name';
 import { setSelectedAddress } from '../../../store/actions';
+import QRCodeModal from '../../../components/institutional/qr-code-modal/qr-code-modal';
 
 const GK8_DISPLAY_NAME = 'gk8';
+const SATURN_DISPLAY_NAME = 'saturn custody';
 
 const CustodyPage = () => {
   const t = useI18nContext();
@@ -88,6 +90,7 @@ const CustodyPage = () => {
   const [chainId, setChainId] = useState(parseInt(currentChainId, 16));
   const connectRequests = useSelector(getInstitutionalConnectRequests, isEqual);
   const [accounts, setAccounts] = useState();
+  const [showQRCodeModal, setShowQRCodeModal] = useState(false);
   const address = useSelector(getSelectedAddress);
   const connectRequest = connectRequests ? connectRequests[0] : undefined;
   const isCheckBoxSelected =
@@ -148,7 +151,10 @@ const CustodyPage = () => {
           setSelectedCustodianType(custodian.type);
         } else {
           setMatchedCustodian(custodianByDisplayName);
-          setIsConfirmConnectCustodianModalVisible(true);
+          custodianByDisplayName?.displayName?.toLocaleLowerCase() ===
+          SATURN_DISPLAY_NAME
+            ? setShowQRCodeModal(true)
+            : setIsConfirmConnectCustodianModalVisible(true);
         }
 
         trackEvent({
@@ -701,6 +707,15 @@ const CustodyPage = () => {
           }
         />
       )}
+
+      {showQRCodeModal && (
+        <QRCodeModal
+          onClose={() => {
+            setShowQRCodeModal(false);
+          }}
+          custodianName={selectedCustodianDisplayName}
+        />
+      )}
     </Box>
   );
 };