fix(frontend): Improve QR scanning reliability for dark borderless codes (#12162)

# Note

This PR is a fork of dfinity/gix-components#759.

Awaiting that review, we simply copy the components in our repo and add
it to the next release, since it is a time-sensitive issue.

# Motivation

The QR code reader was using `html5-qrcode`, which has a known issue
with inverted (dark-themed, borderless) QR codes on mobile — they simply
cannot be scanned. The library is also unmaintained.

Known upstream issues:
- mebjas/html5-qrcode#766
- mebjas/html5-qrcode#468
- mebjas/html5-qrcode#94

Since the root cause is a limitation of `html5-qrcode` itself (no
support for inverted QR codes), and the library is no longer maintained,
this PR replaces it with
[`barcode-detector`](https://www.npmjs.com/package/barcode-detector) — a
[Barcode Detection
API](https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector)
polyfill powered by ZXing C++ WebAssembly under the hood. The underlying
engine natively supports inverted code detection (`tryInvert` is enabled
by default). We tested it manually on a mobile device and dark
borderless QR codes are now successfully scanned.

Thanks to @sea-snake for the tip!

# Changes (copied from gix-components's `QRCodeReader`)

- Removed the `html5-qrcode` dependency entirely in component
`QRCodeReader`.
- In component `QRCodeReader`:
- Camera access is now handled directly via the browser
`navigator.mediaDevices.getUserMedia` API, requesting the rear-facing
camera (`facingMode: "environment"`) at up to 1920×1080 resolution.
  - The video feed is rendered in a native `<video>` element.
- QR decoding uses the standard `BarcodeDetector` API (via
`barcode-detector/ponyfill`). A detector instance is created with
`formats: ["qr_code"]` and `detector.detect(videoElement)` is called at
~10 fps via `setInterval(scan, 100)`. The polyfill accepts the `<video>`
element directly — no intermediate `<canvas>` needed.
- A frame-processing guard (`isProcessingFrame`) prevents overlapping
decode calls.
- Cleanup on destroy properly clears the scan interval and stops all
media tracks.
- The scan overlay is now implemented with a `.scan-overlay` container
with a `.scan-region` box using `box-shadow` to mask the surrounding
area and a border styled with the primary color. This replaces the old
`:global(#qr-shaded-region)` overrides that targeted `html5-qrcode`'s
internal DOM.
- Updated the library reference in the QR code reader docs page from
`jsQR` to `barcode-detector`.
- Added `barcode-detector@^3.1.1` to dependencies and removed
`html5-qrcode`.

# Tests

Manual testing on mobile: dark borderless QR codes are now successfully
scanned (this was the main validation, as the core issue only reproduced
on real mobile devices).

<img width="1071" height="1428" alt="IMG_5315"
src="https://github.com/user-attachments/assets/f25cbe60-3d92-472c-917e-ffdfb5f1b343"
/>
<img width="1179" height="2556" alt="IMG_5314"
src="https://github.com/user-attachments/assets/6fd3d30d-2080-4464-8263-80ce3d544698"
/>

Author: AntonioVentilii

package-lock.json

@@ -89,6 +89,7 @@
 		"@solana/kit": "^6.0.1",
 		"@velora-dex/sdk": "^9.3.3",
 		"alchemy-sdk": "^3.6.5",
+		"barcode-detector": "^3.1.1",
 		"bech32": "^1.1.4",
 		"bitcoinjs-lib": "^6.1.7",
 		"browser-image-compression": "^2.0.2",

package.json

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { QRCodeReader } from '@dfinity/gix-components';
 	import { onMount } from 'svelte';
+	import QrCodeReader from '$lib/components/ui/QrCodeReader.svelte';
 	import { ADDRESS_BOOK_QR_CODE_SCAN } from '$lib/constants/test-ids.constants';
 	import type { QrStatus } from '$lib/types/qr-code';
 
@@ -46,7 +46,7 @@
 	class="stretch qr-code-wrapper h-full w-full md:min-h-[300px]"
 	data-tid={ADDRESS_BOOK_QR_CODE_SCAN}
 >
-	<QRCodeReader on:nnsCancel={onCancel} on:nnsQRCode={onQRCode} />
+	<QrCodeReader on:nnsCancel={onCancel} on:nnsQRCode={onQRCode} />
 </div>
 
 <style lang="scss">

src/frontend/src/lib/components/qr/QrCodeScanner.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+	import { isNullish, nonNullish } from '@dfinity/utils';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import { isDesktop } from '$lib/utils/device.utils';
+	import { nextElementId } from '$lib/utils/html.utils';
+
+	const id = nextElementId('qrcode-reader-');
+
+	const dispatch = createEventDispatcher();
+
+	let videoElement: HTMLVideoElement | undefined;
+	let stream: MediaStream | undefined;
+	let scanInterval: NodeJS.Timeout | undefined;
+	let isDestroyed = false;
+	let isProcessingFrame = false;
+
+	onMount(async () => {
+		try {
+			stream = await navigator.mediaDevices.getUserMedia({
+				video: {
+					facingMode: 'environment',
+					width: { ideal: 1920 },
+					height: { ideal: 1080 }
+				},
+				audio: false
+			});
+
+			if (isDestroyed) {
+				stopStream();
+
+				return;
+			}
+
+			if (nonNullish(videoElement)) {
+				videoElement.srcObject = stream;
+
+				await videoElement.play();
+
+				await startScanning();
+			}
+		} catch (err: unknown) {
+			dispatch('nnsQRCodeError', err);
+		}
+	});
+
+	const startScanning = async () => {
+		try {
+			const { BarcodeDetector } = await import('barcode-detector/ponyfill');
+
+			if (isDestroyed) {
+				return;
+			}
+
+			const detector = new BarcodeDetector({
+				formats: ['qr_code']
+			});
+
+			const scan = async () => {
+				if (
+					isProcessingFrame ||
+					isDestroyed ||
+					isNullish(videoElement) ||
+					videoElement.readyState < HTMLMediaElement.HAVE_CURRENT_DATA
+				) {
+					return;
+				}
+
+				isProcessingFrame = true;
+
+				try {
+					const results = await detector.detect(videoElement);
+
+					const [qrResult] = results;
+
+					if (nonNullish(qrResult)) {
+						dispatch('nnsQRCode', qrResult.rawValue);
+					}
+				} catch {
+					// Decoding failed on this frame — expected when no QR code is visible
+				} finally {
+					isProcessingFrame = false;
+				}
+			};
+
+			scanInterval = setInterval(scan, 100);
+		} catch (err: unknown) {
+			dispatch('nnsQRCodeError', err);
+		}
+	};
+
+	const stopStream = () => {
+		if (nonNullish(stream)) {
+			stream.getTracks().forEach((track) => track.stop());
+
+			stream = undefined;
+		}
+	};
+
+	onDestroy(() => {
+		isDestroyed = true;
+
+		if (nonNullish(scanInterval)) {
+			clearInterval(scanInterval);
+
+			scanInterval = undefined;
+		}
+
+		stopStream();
+	});
+
+	// We optimistically assume that if the QR code reader is used on desktop, it has most probably only a single "user" facing camera and that we can invert the displayed video
+	const mirror = isDesktop();
+</script>
+
+<article {id} class="reader" class:mirror>
+	<video bind:this={videoElement} autoplay muted playsinline></video>
+
+	<div class="scan-overlay">
+		<div class="scan-region"></div>
+	</div>
+</article>
+
+<style lang="scss">
+	.reader {
+		position: relative;
+		width: 100%;
+		height: 100%;
+
+		border-radius: var(--border-radius);
+		overflow: hidden;
+
+		&.mirror {
+			transform: scaleX(-1);
+		}
+	}
+
+	video {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.scan-overlay {
+		position: absolute;
+		inset: 0;
+		container-type: size;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+	}
+
+	.scan-region {
+		width: min(90cqw, 90cqh);
+		aspect-ratio: 1;
+		box-shadow: 0 0 0 9999px white;
+		border: 2px solid rgba(var(--primary-rgb), 0.4);
+	}
+</style>

src/frontend/src/lib/components/ui/QrCodeReader.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { QRCodeReader } from '@dfinity/gix-components';
 	import Button from '$lib/components/ui/Button.svelte';
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
 	import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte';
 	import InputText from '$lib/components/ui/InputText.svelte';
+	import QrCodeReader from '$lib/components/ui/QrCodeReader.svelte';
 	import {
 		TRACK_COUNT_WALLET_CONNECT,
 		TRACK_COUNT_WALLET_CONNECT_QR_CODE
@@ -71,7 +71,7 @@
 <ContentWithToolbar>
 	<div class="qr-code rounded-lg">
 		{#if renderQRCodeReader}
-			<QRCodeReader on:nnsQRCode={onQRCodeSuccess} on:nnsQRCodeError={error} />
+			<QrCodeReader on:nnsQRCode={onQRCodeSuccess} on:nnsQRCodeError={error} />
 		{/if}
 
 		{#if !renderQRCodeReader}

src/frontend/src/lib/components/wallet-connect/WalletConnectForm.svelte

@@ -0,0 +1,10 @@
+let elementsCounters: Record<string, number> = {};
+
+export const nextElementId = (prefix: string): string => {
+	elementsCounters = {
+		...elementsCounters,
+		[prefix]: (elementsCounters[prefix] ?? 0) + 1
+	};
+
+	return `${prefix}${elementsCounters[prefix]}`;
+};