@pezkuwi/react-qr 3.16.8 → 3.17.0

package/build/Display.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { objectSpread } from '@pezkuwi/util';
+import { xxhashAsHex } from '@pezkuwi/util-crypto';
+import { qrcode } from './qrcode.js';
+import { styled } from './styled.js';
+import { createFrames, createImgSize } from './util.js';
+const DEFAULT_FRAME_DELAY = 2750;
+const TIMER_INC = 500;
+function getDataUrl(value) {
+    const qr = qrcode(0, 'M');
+    // HACK See our qrcode stringToBytes override as used internally. This
+    // will only work for the case where we actually pass `Bytes` in here
+    qr.addData(value, 'Byte');
+    qr.make();
+    return qr.createDataURL(16, 0);
+}
+function Display({ className = '', size, skipEncoding, style = {}, timerDelay = DEFAULT_FRAME_DELAY, value }) {
+    const [{ image }, setFrameState] = useState({ frameIdx: 0, frames: [], image: null, valueHash: null });
+    const timerRef = useRef({ timerDelay, timerId: null });
+    const containerStyle = useMemo(() => createImgSize(size), [size]);
+    // run on initial load to setup the global timer and provide and unsubscribe
+    useEffect(() => {
+        const nextFrame = () => setFrameState((state) => {
+            // when we have a single frame, we only ever fire once
+            if (state.frames.length <= 1) {
+                return state;
+            }
+            let frameIdx = state.frameIdx + 1;
+            // when we overflow, skip to the first and slightly increase the delay between frames
+            if (frameIdx === state.frames.length) {
+                frameIdx = 0;
+                timerRef.current.timerDelay = timerRef.current.timerDelay + TIMER_INC;
+            }
+            // only encode the frames on demand, not above as part of the
+            // state derivation - in the case of large payloads, this should
+            // be slightly more responsive on initial load
+            const newState = objectSpread({}, state, {
+                frameIdx,
+                image: getDataUrl(state.frames[frameIdx])
+            });
+            // set the new timer last
+            timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+            return newState;
+        });
+        timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            timerRef.current.timerId && clearTimeout(timerRef.current.timerId);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        setFrameState((state) => {
+            const valueHash = xxhashAsHex(value);
+            if (valueHash === state.valueHash) {
+                return state;
+            }
+            const frames = skipEncoding
+                ? [value]
+                : createFrames(value);
+            // encode on demand
+            return {
+                frameIdx: 0,
+                frames,
+                image: getDataUrl(frames[0]),
+                valueHash
+            };
+        });
+    }, [skipEncoding, value]);
+    if (!image) {
+        return null;
+    }
+    return (_jsx(StyledDiv, { className: className, style: containerStyle, children: _jsx("div", { className: 'ui--qr-Display', style: style, children: _jsx("img", { src: image }) }) }));
+}
+const StyledDiv = styled.div `
+  .ui--qr-Display {
+    height: 100%;
+    width: 100%;
+
+    img,
+    svg {
+      background: white;
+      height: auto !important;
+      max-height: 100%;
+      max-width: 100%;
+      width: auto !important;
+    }
+  }
+`;
+export const QrDisplay = React.memo(Display);

package/build/DisplayAddress.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { QrDisplay } from './Display.js';
+import { createAddressPayload } from './util.js';
+function DisplayAddress({ address, className, genesisHash, size, style, timerDelay }) {
+    const data = useMemo(() => createAddressPayload(address, genesisHash), [address, genesisHash]);
+    if (!data) {
+        return null;
+    }
+    return (_jsx(QrDisplay, { className: className, size: size, skipEncoding: true, style: style, timerDelay: timerDelay, value: data }));
+}
+export const QrDisplayAddress = React.memo(DisplayAddress);

package/build/DisplayPayload.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { QrDisplay } from './Display.js';
+import { createSignPayload } from './util.js';
+function DisplayPayload({ address, className, cmd, genesisHash, payload, size, style, timerDelay }) {
+    const data = useMemo(() => createSignPayload(address, cmd, payload, genesisHash), [address, cmd, payload, genesisHash]);
+    if (!data) {
+        return null;
+    }
+    return (_jsx(QrDisplay, { className: className, size: size, style: style, timerDelay: timerDelay, value: data }));
+}
+export const QrDisplayPayload = React.memo(DisplayPayload);

package/build/NetworkSpecs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { QrDisplay } from './Display.js';
+import { encodeString } from './util.js';
+function DisplayNetworkSpecs({ className, networkSpecs, size, style }) {
+    const data = useMemo(() => encodeString(JSON.stringify(networkSpecs)), [networkSpecs]);
+    if (!data) {
+        return null;
+    }
+    return (_jsx(QrDisplay, { className: className, size: size, skipEncoding: true, style: style, value: data }));
+}
+export const QrNetworkSpecs = React.memo(DisplayNetworkSpecs);

package/build/README.md

@@ -0,0 +1,3 @@
+# @pezkuwi/react-qr
+
+A Qr-code component that allows for the transfer of addresses and transaction payloads to and from external readers. It implements the [Universal Offline Signatures](https://github.com/maciejhirsz/uos) specification to read and generated QR codes.

package/build/Scan.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BrowserQRCodeReader } from '@zxing/browser';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { styled } from './styled.js';
+import { createImgSize } from './util.js';
+const DEFAULT_DELAY = 150;
+const DEFAULT_ERROR = (error) => {
+    console.error('@pezkuwi/react-qr:Scan', error.message);
+};
+function Scan({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }) {
+    const videoRef = useRef(null);
+    const controlsRef = useRef(null);
+    const containerStyle = useMemo(() => createImgSize(size), [size]);
+    const _onError = useCallback((error) => onError(error), [onError]);
+    useEffect(() => {
+        const codeReader = new BrowserQRCodeReader();
+        const startScanning = async () => {
+            try {
+                const videoInputDevices = await BrowserQRCodeReader.listVideoInputDevices();
+                const selectedDeviceId = videoInputDevices[0].deviceId;
+                controlsRef.current = await codeReader.decodeFromVideoDevice(selectedDeviceId, videoRef.current ?? undefined, (result, error) => {
+                    if (result) {
+                        onScan(result.getText());
+                    }
+                    if (error && !(error instanceof Error)) {
+                        _onError(new Error(error));
+                    }
+                });
+            }
+            catch (error) {
+                _onError(error instanceof Error ? error : new Error('Unknown error occurred'));
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        const timeoutId = setTimeout(startScanning, delay);
+        return () => {
+            clearTimeout(timeoutId);
+            if (controlsRef.current) {
+                controlsRef.current.stop();
+            }
+        };
+    }, [onScan, _onError, delay]);
+    return (_jsx(StyledDiv, { className: className, style: containerStyle, children: _jsx("video", { className: 'ui--qr-Scan', ref: videoRef, style: style }) }));
+}
+const StyledDiv = styled.div `
+  .ui--qr-Scan {
+    display: inline-block;
+    height: 100%;
+    transform: matrix(-1, 0, 0, 1, 0, 0);
+    width: 100%;
+  }
+`;
+export const QrScan = React.memo(Scan);

package/build/ScanAddress.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { decodeAddress } from '@pezkuwi/util-crypto';
+import { ADDRESS_PREFIX, SEED_PREFIX } from './constants.js';
+import { QrScan } from './Scan.js';
+function ScanAddress({ className, isEthereum, onError, onScan, size, style }) {
+    const _onScan = useCallback((data) => {
+        if (data) {
+            try {
+                let prefix;
+                let content;
+                let genesisHash;
+                let name;
+                if (!isEthereum) {
+                    [prefix, content, genesisHash, ...name] = data.split(':');
+                }
+                else {
+                    [prefix, content, ...name] = data.split(':');
+                    genesisHash = null;
+                    content = content.substring(0, 42);
+                }
+                const expectedPrefix = (isEthereum ? 'ethereum' : ADDRESS_PREFIX);
+                const isValidPrefix = (prefix === expectedPrefix) || (prefix === SEED_PREFIX);
+                if (!isValidPrefix) {
+                    throw new Error(`Invalid prefix received, expected '${expectedPrefix} or ${SEED_PREFIX}' , found '${prefix}'`);
+                }
+                const isAddress = prefix === expectedPrefix;
+                if (isAddress && !isEthereum) {
+                    decodeAddress(content);
+                }
+                onScan({ content, genesisHash: genesisHash, isAddress, name: name?.length ? name.join(':') : undefined });
+            }
+            catch (error) {
+                onError && onError(error);
+                console.error('@pezkuwi/react-qr:QrScanAddress', error.message, data);
+            }
+        }
+    }, [onScan, onError, isEthereum]);
+    return (_jsx(QrScan, { className: className, onError: onError, onScan: _onScan, size: size, style: style }));
+}
+export const QrScanAddress = React.memo(ScanAddress);

package/build/ScanSignature.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { QrScan } from './Scan.js';
+function ScanSignature({ className, onError, onScan, size, style }) {
+    const _onScan = useCallback((signature) => signature && onScan({ signature: `0x${signature}` }), [onScan]);
+    return (_jsx(QrScan, { className: className, onError: onError, onScan: _onScan, size: size, style: style }));
+}
+export const QrScanSignature = React.memo(ScanSignature);