@pezkuwi/react-qr 3.16.6

package/build/package.json

@@ -0,0 +1,274 @@
+{
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "bugs": "https://github.com/pezkuwichain/ui/issues",
+  "description": "Generates and reads QR codes",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://github.com/pezkuwichain/ui/tree/master/packages/react-qr#readme",
+  "license": "Apache-2.0",
+  "name": "@pezkuwi/react-qr",
+  "repository": {
+    "directory": "packages/react-qr",
+    "type": "git",
+    "url": "https://github.com/pezkuwichain/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./cjs/packageDetect.js"
+  ],
+  "type": "module",
+  "version": "3.16.6",
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    "./cjs/package.json": "./cjs/package.json",
+    "./cjs/*": "./cjs/*.js",
+    ".": {
+      "module": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      },
+      "require": {
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "default": {
+        "types": "./index.d.ts",
+        "default": "./index.js"
+      }
+    },
+    "./bundle": {
+      "module": {
+        "types": "./bundle.d.ts",
+        "default": "./bundle.js"
+      },
+      "require": {
+        "types": "./cjs/bundle.d.ts",
+        "default": "./cjs/bundle.js"
+      },
+      "default": {
+        "types": "./bundle.d.ts",
+        "default": "./bundle.js"
+      }
+    },
+    "./constants": {
+      "module": {
+        "types": "./constants.d.ts",
+        "default": "./constants.js"
+      },
+      "require": {
+        "types": "./cjs/constants.d.ts",
+        "default": "./cjs/constants.js"
+      },
+      "default": {
+        "types": "./constants.d.ts",
+        "default": "./constants.js"
+      }
+    },
+    "./Display": {
+      "module": {
+        "types": "./Display.d.ts",
+        "default": "./Display.js"
+      },
+      "require": {
+        "types": "./cjs/Display.d.ts",
+        "default": "./cjs/Display.js"
+      },
+      "default": {
+        "types": "./Display.d.ts",
+        "default": "./Display.js"
+      }
+    },
+    "./DisplayAddress": {
+      "module": {
+        "types": "./DisplayAddress.d.ts",
+        "default": "./DisplayAddress.js"
+      },
+      "require": {
+        "types": "./cjs/DisplayAddress.d.ts",
+        "default": "./cjs/DisplayAddress.js"
+      },
+      "default": {
+        "types": "./DisplayAddress.d.ts",
+        "default": "./DisplayAddress.js"
+      }
+    },
+    "./DisplayPayload": {
+      "module": {
+        "types": "./DisplayPayload.d.ts",
+        "default": "./DisplayPayload.js"
+      },
+      "require": {
+        "types": "./cjs/DisplayPayload.d.ts",
+        "default": "./cjs/DisplayPayload.js"
+      },
+      "default": {
+        "types": "./DisplayPayload.d.ts",
+        "default": "./DisplayPayload.js"
+      }
+    },
+    "./NetworkSpecs": {
+      "module": {
+        "types": "./NetworkSpecs.d.ts",
+        "default": "./NetworkSpecs.js"
+      },
+      "require": {
+        "types": "./cjs/NetworkSpecs.d.ts",
+        "default": "./cjs/NetworkSpecs.js"
+      },
+      "default": {
+        "types": "./NetworkSpecs.d.ts",
+        "default": "./NetworkSpecs.js"
+      }
+    },
+    "./package.json": {
+      "require": "./cjs/package.json",
+      "default": "./package.json"
+    },
+    "./packageDetect": {
+      "module": {
+        "types": "./packageDetect.d.ts",
+        "default": "./packageDetect.js"
+      },
+      "require": {
+        "types": "./cjs/packageDetect.d.ts",
+        "default": "./cjs/packageDetect.js"
+      },
+      "default": {
+        "types": "./packageDetect.d.ts",
+        "default": "./packageDetect.js"
+      }
+    },
+    "./packageInfo.js": {
+      "module": {
+        "types": "./packageInfo.d.ts",
+        "default": "./packageInfo.js"
+      },
+      "require": {
+        "types": "./cjs/packageInfo.d.ts",
+        "default": "./cjs/packageInfo.js"
+      },
+      "default": {
+        "types": "./packageInfo.d.ts",
+        "default": "./packageInfo.js"
+      }
+    },
+    "./packageInfo": {
+      "module": {
+        "types": "./packageInfo.d.ts",
+        "default": "./packageInfo.js"
+      },
+      "require": {
+        "types": "./cjs/packageInfo.d.ts",
+        "default": "./cjs/packageInfo.js"
+      },
+      "default": {
+        "types": "./packageInfo.d.ts",
+        "default": "./packageInfo.js"
+      }
+    },
+    "./qrcode": {
+      "module": {
+        "types": "./qrcode.d.ts",
+        "default": "./qrcode.js"
+      },
+      "require": {
+        "types": "./cjs/qrcode.d.ts",
+        "default": "./cjs/qrcode.js"
+      },
+      "default": {
+        "types": "./qrcode.d.ts",
+        "default": "./qrcode.js"
+      }
+    },
+    "./Scan": {
+      "module": {
+        "types": "./Scan.d.ts",
+        "default": "./Scan.js"
+      },
+      "require": {
+        "types": "./cjs/Scan.d.ts",
+        "default": "./cjs/Scan.js"
+      },
+      "default": {
+        "types": "./Scan.d.ts",
+        "default": "./Scan.js"
+      }
+    },
+    "./ScanAddress": {
+      "module": {
+        "types": "./ScanAddress.d.ts",
+        "default": "./ScanAddress.js"
+      },
+      "require": {
+        "types": "./cjs/ScanAddress.d.ts",
+        "default": "./cjs/ScanAddress.js"
+      },
+      "default": {
+        "types": "./ScanAddress.d.ts",
+        "default": "./ScanAddress.js"
+      }
+    },
+    "./ScanSignature": {
+      "module": {
+        "types": "./ScanSignature.d.ts",
+        "default": "./ScanSignature.js"
+      },
+      "require": {
+        "types": "./cjs/ScanSignature.d.ts",
+        "default": "./cjs/ScanSignature.js"
+      },
+      "default": {
+        "types": "./ScanSignature.d.ts",
+        "default": "./ScanSignature.js"
+      }
+    },
+    "./styled": {
+      "module": {
+        "types": "./styled.d.ts",
+        "default": "./styled.js"
+      },
+      "require": {
+        "types": "./cjs/styled.d.ts",
+        "default": "./cjs/styled.js"
+      },
+      "default": {
+        "types": "./styled.d.ts",
+        "default": "./styled.js"
+      }
+    },
+    "./util": {
+      "module": {
+        "types": "./util.d.ts",
+        "default": "./util.js"
+      },
+      "require": {
+        "types": "./cjs/util.d.ts",
+        "default": "./cjs/util.js"
+      },
+      "default": {
+        "types": "./util.d.ts",
+        "default": "./util.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@pezkuwi/ui-settings": "3.16.6",
+    "@pezkuwi/util": "^14.0.5",
+    "@pezkuwi/util-crypto": "^14.0.5",
+    "@zxing/browser": "^0.1.5",
+    "@zxing/library": "^0.21.2",
+    "qrcode-generator": "^1.4.4",
+    "styled-components": "^6.1.1",
+    "tslib": "^2.8.1"
+  },
+  "peerDependencies": {
+    "@pezkuwi/util": "*",
+    "@pezkuwi/util-crypto": "*",
+    "react": "*",
+    "react-dom": "*",
+    "react-is": "*"
+  }
+}

package/build/packageDetect.d.ts

@@ -0,0 +1 @@
+export {};

package/build/packageDetect.js

@@ -0,0 +1,3 @@
+import { detectPackage } from '@pezkuwi/util';
+import { packageInfo } from './packageInfo.js';
+detectPackage(packageInfo, null, []);

package/build/packageInfo.d.ts

@@ -0,0 +1,6 @@
+export declare const packageInfo: {
+    name: string;
+    path: string;
+    type: string;
+    version: string;
+};

package/build/packageInfo.js

@@ -0,0 +1 @@
+export const packageInfo = { name: '@pezkuwi/react-qr', path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto', type: 'esm', version: '3.16.6' };

package/build/qrcode.d.ts

@@ -0,0 +1,3 @@
+import _qrcode from 'qrcode-generator';
+declare const qrcode: typeof _qrcode;
+export { qrcode };

package/build/qrcode.js

@@ -0,0 +1,4 @@
+import _qrcode from 'qrcode-generator';
+const qrcode = _qrcode;
+qrcode.stringToBytes = (data) => data;
+export { qrcode };

package/build/styled.d.ts

@@ -0,0 +1 @@
+export { styled } from 'styled-components';

package/build/styled.js

@@ -0,0 +1 @@
+export { styled } from 'styled-components';

package/build/util.d.ts

@@ -0,0 +1,7 @@
+export declare function encodeNumber(value: number): Uint8Array;
+export declare function encodeString(value: string): Uint8Array;
+export declare function decodeString(value: Uint8Array): string;
+export declare function createAddressPayload(address: string, genesisHash: string): Uint8Array;
+export declare function createSignPayload(address: string, cmd: number, payload: string | Uint8Array, genesisHash: string | Uint8Array): Uint8Array;
+export declare function createFrames(input: Uint8Array): Uint8Array[];
+export declare function createImgSize(size?: string | number): Record<string, string>;

package/build/util.js

@@ -0,0 +1,50 @@
+import { isString, u8aConcat, u8aToU8a } from '@pezkuwi/util';
+import { decodeAddress } from '@pezkuwi/util-crypto';
+import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants.js';
+const MULTIPART = new Uint8Array([0]);
+export function encodeNumber(value) {
+    return new Uint8Array([value >> 8, value & 0xff]);
+}
+export function encodeString(value) {
+    const count = value.length;
+    const u8a = new Uint8Array(count);
+    for (let i = 0; i < count; i++) {
+        u8a[i] = value.charCodeAt(i);
+    }
+    return u8a;
+}
+export function decodeString(value) {
+    return value.reduce((str, code) => {
+        return str + String.fromCharCode(code);
+    }, '');
+}
+export function createAddressPayload(address, genesisHash) {
+    return encodeString(`${ADDRESS_PREFIX}:${address}:${genesisHash}`);
+}
+export function createSignPayload(address, cmd, payload, genesisHash) {
+    return u8aConcat(SUBSTRATE_ID, CRYPTO_SR25519, new Uint8Array([cmd]), decodeAddress(address), u8aToU8a(payload), u8aToU8a(genesisHash));
+}
+export function createFrames(input) {
+    const frames = [];
+    let idx = 0;
+    while (idx < input.length) {
+        frames.push(input.subarray(idx, idx + FRAME_SIZE));
+        idx += FRAME_SIZE;
+    }
+    return frames.map((frame, index) => u8aConcat(MULTIPART, encodeNumber(frames.length), encodeNumber(index), frame));
+}
+export function createImgSize(size) {
+    if (!size) {
+        return {
+            height: 'auto',
+            width: '100%'
+        };
+    }
+    const height = isString(size)
+        ? size
+        : `${size}px`;
+    return {
+        height,
+        width: height
+    };
+}

package/build-tsc/Display.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    className?: string | undefined;
+    size?: string | number | undefined;
+    skipEncoding?: boolean;
+    style?: React.CSSProperties | undefined;
+    timerDelay?: number | undefined;
+    value: Uint8Array;
+}
+declare function Display({ className, size, skipEncoding, style, timerDelay, value }: Props): React.ReactElement<Props> | null;
+export declare const QrDisplay: React.MemoExoticComponent<typeof Display>;
+export {};

package/build-tsc/DisplayAddress.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    address: string;
+    genesisHash: string;
+    className?: string;
+    size?: string | number;
+    style?: React.CSSProperties;
+    timerDelay?: number;
+}
+declare function DisplayAddress({ address, className, genesisHash, size, style, timerDelay }: Props): React.ReactElement<Props> | null;
+export declare const QrDisplayAddress: React.MemoExoticComponent<typeof DisplayAddress>;
+export {};

package/build-tsc/DisplayPayload.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface Props {
+    address: string;
+    className?: string;
+    cmd: number;
+    delay?: number;
+    genesisHash: Uint8Array | string;
+    payload: Uint8Array;
+    size?: string | number;
+    style?: React.CSSProperties;
+    timerDelay?: number;
+}
+declare function DisplayPayload({ address, className, cmd, genesisHash, payload, size, style, timerDelay }: Props): React.ReactElement<Props> | null;
+export declare const QrDisplayPayload: React.MemoExoticComponent<typeof DisplayPayload>;
+export {};

package/build-tsc/NetworkSpecs.d.ts

@@ -0,0 +1,11 @@
+import type { NetworkSpecsStruct } from '@pezkuwi/ui-settings/types';
+import React from 'react';
+interface Props {
+    className?: string;
+    networkSpecs: NetworkSpecsStruct;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare function DisplayNetworkSpecs({ className, networkSpecs, size, style }: Props): React.ReactElement<Props> | null;
+export declare const QrNetworkSpecs: React.MemoExoticComponent<typeof DisplayNetworkSpecs>;
+export {};

package/build-tsc/Scan.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    className?: string | undefined;
+    delay?: number;
+    onError?: undefined | ((error: Error) => void);
+    onScan: (data: string) => void;
+    size?: string | number | undefined;
+    style?: React.CSSProperties | undefined;
+}
+declare function Scan({ className, delay, onError, onScan, size, style }: Props): React.ReactElement<Props>;
+export declare const QrScan: React.MemoExoticComponent<typeof Scan>;
+export {};

package/build-tsc/ScanAddress.d.ts

@@ -0,0 +1,19 @@
+import type { HexString } from '@pezkuwi/util/types';
+import React from 'react';
+interface ScanType {
+    isAddress: boolean;
+    content: string;
+    genesisHash: HexString | null;
+    name?: string | undefined;
+}
+interface Props {
+    className?: string;
+    onError?: (error: Error) => void;
+    onScan: (scanned: ScanType) => void;
+    size?: string | number;
+    style?: React.CSSProperties;
+    isEthereum?: boolean;
+}
+declare function ScanAddress({ className, isEthereum, onError, onScan, size, style }: Props): React.ReactElement<Props>;
+export declare const QrScanAddress: React.MemoExoticComponent<typeof ScanAddress>;
+export {};

package/build-tsc/ScanSignature.d.ts

@@ -0,0 +1,15 @@
+import type { HexString } from '@pezkuwi/util/types';
+import React from 'react';
+interface ScanType {
+    signature: HexString;
+}
+interface Props {
+    className?: string;
+    onError?: (error: Error) => void;
+    onScan: (scanned: ScanType) => void;
+    size?: string | number;
+    style?: React.CSSProperties;
+}
+declare function ScanSignature({ className, onError, onScan, size, style }: Props): React.ReactElement<Props>;
+export declare const QrScanSignature: React.MemoExoticComponent<typeof ScanSignature>;
+export {};

package/build-tsc/bundle.d.ts

@@ -0,0 +1,6 @@
+export { QrDisplayAddress } from './DisplayAddress.js';
+export { QrDisplayPayload } from './DisplayPayload.js';
+export { QrNetworkSpecs } from './NetworkSpecs.js';
+export { packageInfo } from './packageInfo.js';
+export { QrScanAddress } from './ScanAddress.js';
+export { QrScanSignature } from './ScanSignature.js';

package/build-tsc/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const ADDRESS_PREFIX = "substrate";
+export declare const SEED_PREFIX = "secret";
+export declare const FRAME_SIZE = 1024;
+export declare const SUBSTRATE_ID: Uint8Array;
+export declare const CRYPTO_SR25519: Uint8Array;
+export declare const CMD_SIGN_TX: Uint8Array;
+export declare const CMD_SIGN_TX_HASH: Uint8Array;
+export declare const CMD_SIGN_IMMORTAL_TX: Uint8Array;
+export declare const CMD_SIGN_MSG: Uint8Array;

package/build-tsc/index.d.ts

@@ -0,0 +1,2 @@
+import './packageDetect.js';
+export * from './bundle.js';

package/build-tsc/packageDetect.d.ts

@@ -0,0 +1 @@
+export {};

package/build-tsc/packageInfo.d.ts

@@ -0,0 +1,6 @@
+export declare const packageInfo: {
+    name: string;
+    path: string;
+    type: string;
+    version: string;
+};

package/build-tsc/qrcode.d.ts

@@ -0,0 +1,3 @@
+import _qrcode from 'qrcode-generator';
+declare const qrcode: typeof _qrcode;
+export { qrcode };

package/build-tsc/styled.d.ts

@@ -0,0 +1 @@
+export { styled } from 'styled-components';

package/build-tsc/util.d.ts

@@ -0,0 +1,7 @@
+export declare function encodeNumber(value: number): Uint8Array;
+export declare function encodeString(value: string): Uint8Array;
+export declare function decodeString(value: Uint8Array): string;
+export declare function createAddressPayload(address: string, genesisHash: string): Uint8Array;
+export declare function createSignPayload(address: string, cmd: number, payload: string | Uint8Array, genesisHash: string | Uint8Array): Uint8Array;
+export declare function createFrames(input: Uint8Array): Uint8Array[];
+export declare function createImgSize(size?: string | number): Record<string, string>;

package/build-tsc-cjs/Display.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QrDisplay = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const util_1 = require("@pezkuwi/util");
+const util_crypto_1 = require("@pezkuwi/util-crypto");
+const qrcode_js_1 = require("./qrcode.js");
+const styled_js_1 = require("./styled.js");
+const util_js_1 = require("./util.js");
+const DEFAULT_FRAME_DELAY = 2750;
+const TIMER_INC = 500;
+function getDataUrl(value) {
+    const qr = (0, qrcode_js_1.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] = (0, react_1.useState)({ frameIdx: 0, frames: [], image: null, valueHash: null });
+    const timerRef = (0, react_1.useRef)({ timerDelay, timerId: null });
+    const containerStyle = (0, react_1.useMemo)(() => (0, util_js_1.createImgSize)(size), [size]);
+    // run on initial load to setup the global timer and provide and unsubscribe
+    (0, react_1.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 = (0, util_1.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
+    }, []);
+    (0, react_1.useEffect)(() => {
+        setFrameState((state) => {
+            const valueHash = (0, util_crypto_1.xxhashAsHex)(value);
+            if (valueHash === state.valueHash) {
+                return state;
+            }
+            const frames = skipEncoding
+                ? [value]
+                : (0, util_js_1.createFrames)(value);
+            // encode on demand
+            return {
+                frameIdx: 0,
+                frames,
+                image: getDataUrl(frames[0]),
+                valueHash
+            };
+        });
+    }, [skipEncoding, value]);
+    if (!image) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(StyledDiv, { className: className, style: containerStyle, children: (0, jsx_runtime_1.jsx)("div", { className: 'ui--qr-Display', style: style, children: (0, jsx_runtime_1.jsx)("img", { src: image }) }) }));
+}
+const StyledDiv = styled_js_1.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;
+    }
+  }
+`;
+exports.QrDisplay = react_1.default.memo(Display);

package/build-tsc-cjs/DisplayAddress.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QrDisplayAddress = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const Display_js_1 = require("./Display.js");
+const util_js_1 = require("./util.js");
+function DisplayAddress({ address, className, genesisHash, size, style, timerDelay }) {
+    const data = (0, react_1.useMemo)(() => (0, util_js_1.createAddressPayload)(address, genesisHash), [address, genesisHash]);
+    if (!data) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Display_js_1.QrDisplay, { className: className, size: size, skipEncoding: true, style: style, timerDelay: timerDelay, value: data }));
+}
+exports.QrDisplayAddress = react_1.default.memo(DisplayAddress);

package/build-tsc-cjs/DisplayPayload.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QrDisplayPayload = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const Display_js_1 = require("./Display.js");
+const util_js_1 = require("./util.js");
+function DisplayPayload({ address, className, cmd, genesisHash, payload, size, style, timerDelay }) {
+    const data = (0, react_1.useMemo)(() => (0, util_js_1.createSignPayload)(address, cmd, payload, genesisHash), [address, cmd, payload, genesisHash]);
+    if (!data) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Display_js_1.QrDisplay, { className: className, size: size, style: style, timerDelay: timerDelay, value: data }));
+}
+exports.QrDisplayPayload = react_1.default.memo(DisplayPayload);