chore: added custom width when hardware sign popover is fullscreen

ngraveio · May 27, 2024 · 3d75c5d · 3d75c5d
1 parent 9e97ea6
commit 3d75c5d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-popover.js b/ui/components/app/qr-hardware-popover/qr-hardware-popover.js
@@ -67,6 +67,7 @@ const QRHardwarePopover = () => {
     <Popover
       title={title}
       onClose={showWalletImporter ? walletImporterCancel : signRequestCancel}
+      customWidth="800px"
     >
       {showWalletImporter && (
         <QRHardwareWalletImporter

diff --git a/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js b/ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js
@@ -59,7 +59,11 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
             backgroundColor: 'var(--qr-code-white-background)',
           }}
         >
-          <QRCode value={currentQRCode.toUpperCase()} size={qrSize} />
+          <QRCode
+            value={currentQRCode.toUpperCase()}
+            size={qrSize}
+            level={level}
+          />
         </div>
       </Box>
       <Box paddingBottom={4} paddingLeft={4} paddingRight={4}>

diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
 import Box from '../box';
 import {
   AlignItems,
@@ -49,6 +51,9 @@ const defaultFooterProps = {
   padding: [4, 6, 6],
 };
 
+const environmentType = getEnvironmentType();
+const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
+
 /**
  * @deprecated The `<Popover>` component has been deprecated in favor of the new `<Modal>` component from the component-library.
  * Please update your code to use the new `<Modal>` component instead, which can be found at ui/components/component-library/modal/modal.tsx.
@@ -78,6 +83,7 @@ const Popover = ({
   headerProps = defaultHeaderProps,
   contentProps = defaultContentProps,
   footerProps = defaultFooterProps,
+  customWidth,
 }) => {
   const t = useI18nContext();
   const showHeader = title || onBack || subtitle || onClose;
@@ -137,6 +143,7 @@ const Popover = ({
       <section
         className={classnames('popover-wrap', className)}
         ref={popoverRef}
+        style={{ width: isFullScreen ? customWidth : null }}
       >
         {showArrow ? <div className="popover-arrow" /> : null}
         {showHeader && <Header />}
@@ -259,6 +266,10 @@ Popover.propTypes = {
    * Box props for the footer
    */
   footerProps: PropTypes.shape({ ...Box.propTypes }),
+  /**
+   * Box props for custom width
+   */
+  customWidth: PropTypes.string,
 };
 
 /**