QR settings & NGRAVE copy update

shared/constants/hardware-wallets.ts

@@ -38,6 +38,7 @@ export enum HardwareAffiliateLinks {
   coolwallet = 'https://www.coolwallet.io/',
   dcent = 'https://dcentwallet.com/',
   imtoken = 'https://token.im/',
+  ngrave = 'https://shop.ngrave.io/',
   onekey = 'https://onekey.so/products/onekey-pro-hardware-wallet/',
 }
 
@@ -50,6 +51,7 @@ export enum HardwareAffiliateTutorialLinks {
   coolwallet = 'https://www.coolwallet.io/metamask-step-by-step-guides/',
   dcent = 'https://medium.com/dcentwallet/dcent-wallet-now-supports-qr-based-protocol-to-link-with-metamask-57555f02603f',
   imtoken = 'https://support.token.im/hc/en-us/articles/24652624775961/',
+  ngrave = 'https://ngrave.io/zero',
   onekey = 'https://help.onekey.so/hc/articles/9426592069903',
 }
 

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

ui/components/app/qr-hardware-popover/qr-hardware-sign-request/player.js

@@ -14,20 +14,30 @@ import { Text, Box } from '../../../component-library';
 
 const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
   const t = useI18nContext();
+  const [interval, setIntervalValue] = useState(100);
+  const [maxFragmentLength, setMaxFragmentLength] = useState(200);
+  const [qrSize, setQRSize] = useState(250);
+  const [level, setLevel] = useState('L');
+
   const urEncoder = useMemo(
-    // For NGRAVE ZERO support please keep to a maximum fragment size of 200
-    () => new UREncoder(new UR(Buffer.from(cbor, 'hex'), type), 200),
-    [cbor, type],
+    () =>
+      new UREncoder(new UR(Buffer.from(cbor, 'hex'), type), maxFragmentLength),
+    [cbor, type, maxFragmentLength],
   );
   const [currentQRCode, setCurrentQRCode] = useState(urEncoder.nextPart());
+
+  const handleLevelChange = (event) => {
+    setLevel(event.target.value);
+  };
+
   useEffect(() => {
     const id = setInterval(() => {
       setCurrentQRCode(urEncoder.nextPart());
-    }, 100);
+    }, interval);
     return () => {
       clearInterval(id);
     };
-  }, [urEncoder]);
+  }, [urEncoder, interval, level]);
 
   return (
     <>
@@ -49,14 +59,100 @@ const Player = ({ type, cbor, cancelQRHardwareSignRequest, toRead }) => {
             backgroundColor: 'var(--qr-code-white-background)',
           }}
         >
-          <QRCode value={currentQRCode.toUpperCase()} size={250} />
+          <QRCode
+            value={currentQRCode.toUpperCase()}
+            size={qrSize}
+            level={level}
+          />
         </div>
       </Box>
       <Box paddingBottom={4} paddingLeft={4} paddingRight={4}>
         <Text align={TextAlign.Center}>
           {t('QRHardwareSignRequestDescription')}
         </Text>
       </Box>
+      <Box
+        paddingBottom={4}
+        paddingLeft={4}
+        paddingRight={4}
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+      >
+        <Text align={TextAlign.Center}>QR Code Interval ({interval} ms)</Text>
+        <input
+          type="range"
+          min="10"
+          max="1000"
+          step="10"
+          value={interval}
+          onChange={(e) => setIntervalValue(Number(e.target.value))}
+        />
+        <Text align={TextAlign.Center}>
+          Max Fragment Length {maxFragmentLength}
+        </Text>
+        <input
+          type="range"
+          min="10"
+          max="1500"
+          step="1"
+          value={maxFragmentLength}
+          onChange={(e) => setMaxFragmentLength(Number(e.target.value))}
+        />
+        <Text align={TextAlign.Center}>QR Code Size {qrSize}</Text>
+        <input
+          type="range"
+          min="10"
+          max="500"
+          step="1"
+          value={qrSize}
+          onChange={(e) => setQRSize(Number(e.target.value))}
+        />
+        <Box paddingTop={4} paddingBottom={4} paddingLeft={4} paddingRight={4}>
+          <Text align={TextAlign.Center}>Error Correction Level</Text>
+          <>
+            <input
+              type="radio"
+              id="levelL"
+              name="level"
+              value="L"
+              checked={level === 'L'}
+              onChange={handleLevelChange}
+            />
+            <label htmlFor="levelL">Low (L)</label>
+            <br />
+            <input
+              type="radio"
+              id="levelM"
+              name="level"
+              value="M"
+              checked={level === 'M'}
+              onChange={handleLevelChange}
+            />
+            <label htmlFor="levelM">Medium (M)</label>
+            <br />
+            <input
+              type="radio"
+              id="levelQ"
+              name="level"
+              value="Q"
+              checked={level === 'Q'}
+              onChange={handleLevelChange}
+            />
+            <label htmlFor="levelQ">Quartile (Q)</label>
+            <br />
+            <input
+              type="radio"
+              id="levelH"
+              name="level"
+              value="H"
+              checked={level === 'H'}
+              onChange={handleLevelChange}
+            />
+            <label htmlFor="levelH">High (H)</label>
+          </>
+        </Box>
+      </Box>
       <PageContainerFooter
         onCancel={cancelQRHardwareSignRequest}
         onSubmit={toRead}

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,
 };
 
 /**