fix: upgrade deps (#127)

* fix: upgrade deps

* fix: qr-code deps

package.json

@@ -37,14 +37,14 @@
   "dependencies": {
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
-    "@tradetrust-tt/decentralized-renderer-react-components": "^3.15.5",
+    "@tradetrust-tt/decentralized-renderer-react-components": "^3.15.6",
     "@tradetrust-tt/tradetrust": "6.10.0",
     "@tradetrust-tt/tradetrust-ui-components": "^3.2.1",
     "@trustvc/trustvc": "^1.2.1",
     "date-fns": "^2.28.0",
     "debug": "^4.3.4",
     "escape-goat": "3.0.0",
-    "qrcode.react": "^1.0.1",
+    "qrcode.react": "^4.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "xml2js": "^0.6.2"
@@ -69,8 +69,7 @@
     "@types/debug": "^4.1.7",
     "@types/jest": "^27.4.0",
     "@types/node": "^17.0.19",
-    "@types/qrcode.react": "^1.0.2",
-    "@types/react": "^17.0.39",
+    "@types/react": "^19.0.7",
     "@types/react-dom": "^17.0.11",
     "@types/webpack-env": "^1.18.5",
     "@types/xml2js": "^0.4.12",

src/core/DocumentQrCode/DocumentQrCode.tsx

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import QRCode, { ImageSettings } from "qrcode.react";
+import { QRCodeSVG } from "qrcode.react";
 import React, { FunctionComponent } from "react";
 import qrcodeImg from "/static/images/logo-qrcode.png";
 
@@ -30,7 +30,7 @@ interface DocumentQrCode {
 }
 
 export const DocumentQrCode: FunctionComponent<DocumentQrCode> = ({ url }) => {
-  const imageSettings: ImageSettings = {
+  const imageSettings = {
     src: qrcodeImg,
     height: 90,
     width: 100,
@@ -39,7 +39,7 @@ export const DocumentQrCode: FunctionComponent<DocumentQrCode> = ({ url }) => {
 
   return (
     <Print>
-      <QRCode value={url} level="M" size={400} imageSettings={imageSettings} />
+      <QRCodeSVG value={url} level="M" size={400} imageSettings={imageSettings} />
       <div style={{ fontSize: 32, marginLeft: 64 }}>Scan the QR code with a QR code scanner device.</div>
       <div className="generated-text">Automatically Generated</div>
     </Print>

src/core/Wrapper/Wrapper.tsx

@@ -2,7 +2,12 @@ import React, { FunctionComponent } from "react";
 import { ErrorBoundary } from "../ErrorBoundary";
 
 // `container mx-auto px-4` <- this is in line with tt and creator's tw config, so containers can align
-export const Wrapper: FunctionComponent = ({ children, ...props }) => {
+interface WrapperProps {
+  children: React.ReactNode;
+  [key: string]: any;
+}
+
+export const Wrapper: FunctionComponent<WrapperProps> = ({ children, ...props }) => {
   return (
     <ErrorBoundary>
       <div className="container mx-auto px-4 py-4" {...props}>

src/templates/Brochure/BrochureTemplate.tsx

@@ -1,15 +1,15 @@
-import React, { FunctionComponent, useEffect, useState } from "react";
 import { RedactableValue, TemplateProps } from "@tradetrust-tt/decentralized-renderer-react-components";
-import { getDocumentData } from "../../utils";
+import { QRCodeSVG } from "qrcode.react";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { IconRedact, PrivacyFilter } from "../../core/PrivacyFilter";
 import { Wrapper } from "../../core/Wrapper";
-import { BrochureSchema, BrochureDocument } from "./types";
+import { getDocumentData } from "../../utils";
+import { BrochureDocument, BrochureSchema } from "./types";
 import govtechLogo from "/static/images/logo-govtech.png";
 import imdaLogo from "/static/images/logo-imda.png";
-import ttLogo from "/static/images/logo-tradetrust.png";
 import oaLogo from "/static/images/logo-oa.png";
+import ttLogo from "/static/images/logo-tradetrust.png";
 import govtechCurve from "/static/images/pattern-waves-vertical.png";
-import QRCode from "qrcode.react";
-import { IconRedact, PrivacyFilter } from "../../core/PrivacyFilter";
 
 export const BrochureHeader: React.FC = () => (
   <>
@@ -30,6 +30,7 @@ interface BrochurePageProps {
   header?: string;
   footnote?: string;
   footer?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export const BrochurePage: React.FC<BrochurePageProps> = ({
@@ -405,7 +406,7 @@ const Page4: React.FC<{
           <>
             <div className="h-0.5 w-full bg-gradient-to-r from-green-700 to-sky-400 my-4 mb-2" />
             <div className="flex flex-row items-center h-fit w-full bg-gradient-to-r from-green-700 to-sky-400 rounded-lg p-7 mb-16">
-              <QRCode includeMargin={true} value={footer.qrUrl} level="M" size={200} />
+              <QRCodeSVG marginSize={4} value={footer.qrUrl} level="M" size={200} />
               <div className="w-48 ml-4 text-white text-sm">{footer.qrPrompt}</div>
               <div className="grow" />
               <div className="flex flex-col text-right text-white text-sm">

src/templates/ChaftaCoo/ChaftaCooTemplate.tsx

@@ -32,7 +32,7 @@ type ObfuscationHandling = {
 type ChaftaCooDocumentWithObfuscation = ChaftaCooDocument & ObfuscationHandling;
 type ChaftaCooTemplateProps = TemplateProps<ChaftaCooDocumentSchema>;
 
-const UnderlineDashed: FunctionComponent<React.ReactNode> = () => <div className="border-dashed border-b-2 my-2" />;
+const UnderlineDashed: FunctionComponent = () => <div className="border-dashed border-b-2 my-2" />;
 
 export const PrivacyButton: FunctionComponent<PrivacyButtonProps> = ({
   isPrivacyOn,