Replace QR Lib (#2145)

QR's generated by `qr-image` are not working with devcon scanners -
replacing it with the lib we use for one click

packages/lib/passport-ui/package.json

@@ -31,7 +31,7 @@
     "@pcd/message-pcd": "0.5.0",
     "medium-zoom": "^1.0.8",
     "pako": "^2.1.0",
-    "qr-image": "^3.2.0",
+    "qrcode": "^1.5.4",
     "react": "^18.2.0",
     "react-router-dom": "^6.9.0",
     "styled-components": "^5.3.9"

packages/lib/passport-ui/src/QR.tsx

@@ -1,5 +1,5 @@
 import { gzip, ungzip } from "pako";
-import qr, { SvgObject } from "qr-image";
+import * as QRCode from "qrcode";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import styled, { FlattenSimpleInterpolation, css } from "./StyledWrapper";
 
@@ -152,28 +152,23 @@ export function QR({
   fgColor: string;
   bgColor: string;
 }): JSX.Element {
-  const [svgObject, setSvgObject] = useState<SvgObject | undefined>();
+  const [dataURL, setDataURL] = useState<string | undefined>();
 
   useEffect(() => {
-    const svgObject = qr.svgObject(value, "L");
-    setSvgObject(svgObject);
+    const generateQR = async (): Promise<void> => {
+      const dataUrl = await QRCode.toDataURL(value, {
+        type: "image/webp",
+        scale: 10,
+        margin: 0
+      });
+      setDataURL(dataUrl);
+    };
+    generateQR();
   }, [bgColor, fgColor, value]);
 
   return (
     <Container>
-      {svgObject && (
-        <svg
-          viewBox={`0 0 ${svgObject.size} ${svgObject.size}`}
-          preserveAspectRatio="none"
-        >
-          <path
-            width="100%"
-            height="100%"
-            d={svgObject.path}
-            fill={fgColor}
-          ></path>
-        </svg>
-      )}
+      <img src={dataURL} />
     </Container>
   );
 }
@@ -182,7 +177,7 @@ const Container = styled.div`
   width: 100% !important;
   height: 100% !important;
 
-  svg {
+  img {
     position: absolute;
     width: 100%;
     height: 100%;

yarn.lock

@@ -18920,11 +18920,6 @@ pvutils@^1.1.3:
   resolved "https://registry.yarnpkg.com/pvutils/-/pvutils-1.1.3.tgz#f35fc1d27e7cd3dfbd39c0826d173e806a03f5a3"
   integrity sha512-pMpnA0qRdFp32b1sJl1wOJNxZLQ2cbQx+k6tjNtZ8CpvVhNqEPRgivZ2WOUev2YMajecdH7ctUPDvEe87nariQ==
 
-qr-image@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/qr-image/-/qr-image-3.2.0.tgz#9fa8295beae50c4a149cf9f909a1db464a8672e8"
-  integrity sha512-rXKDS5Sx3YipVsqmlMJsJsk6jXylEpiHRC2+nJy66fxA5ExYyGa4PqwteW69SaVmAb2OQ18HbYriT7cGQMbduw==
-
 qrcode@^1.5.4:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.5.4.tgz#5cb81d86eb57c675febb08cf007fff963405da88"
@@ -21581,9 +21576,9 @@ ts-api-utils@^1.0.1:
   integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
 
 ts-api-utils@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
-  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.0.tgz#709c6f2076e511a81557f3d07a0cbd566ae8195c"
+  integrity sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==
 
 ts-custom-error@^3.2.0:
   version "3.3.1"