[Wallet]: Fix Broken QR Codes (#33316)

Fixes a bug where QR Codes where not loading in the Wallet

components/brave_wallet_ui/components/desktop/popup-modals/account-settings-modal/account-settings-modal.style.ts

@@ -51,6 +51,9 @@ export const QRCodeWrapper = styled.div`
 export const QRCodeImage = styled.img`
   width: 170px;
   height: 170px;
+  @media (prefers-color-scheme: dark) {
+    filter: invert(1);
+  }
 `
 
 export const AddressButton = styled(WalletButton)`

components/brave_wallet_ui/page/screens/fund-wallet/deposit-funds.style.ts

@@ -63,6 +63,9 @@ export const QRCodeContainer = styled.div`
 export const QRCodeImage = styled.img`
   width: 260px;
   height: 260px;
+  @media (prefers-color-scheme: dark) {
+    filter: invert(1);
+  }
 `
 
 export const ScrollContainer = styled.div`

components/brave_wallet_ui/utils/qr-code-utils.ts

@@ -7,14 +7,24 @@ import * as qr from 'qr-image'
 
 export const generateQRCode = (data: string): Promise<string> => {
   return new Promise((resolve, reject) => {
-    const image = qr.image(data)
-    let chunks: Uint8Array[] = []
-    image
-      .on('data', (chunk: Uint8Array) => chunks.push(chunk))
-      .on('end', () => {
-        resolve(
-          `data:image/png;base64,${Buffer.concat(chunks).toString('base64')}`,
-        )
-      })
+    try {
+      // Use SVG output instead of PNG to avoid zlib dependency issues
+      // with the browser-assert polyfill (zlib requires assert.ok which
+      // browser-assert doesn't provide)
+      // This is only for generating QR codes with trusted data
+      const image = qr.image(data, { type: 'svg' })
+      let chunks: string[] = []
+      image
+        .on('data', (chunk: Buffer) => chunks.push(chunk.toString()))
+        .on('end', () => {
+          const svgString = chunks.join('')
+          resolve(`data:image/svg+xml;base64,${btoa(svgString)}`)
+        })
+        .on('error', (error: Error) => {
+          reject(error)
+        })
+    } catch (error) {
+      reject(error)
+    }
   })
 }