1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 15:14:29 +01:00
metamask-extension/ui/components/app/qr-hardware-popover/enhanced-reader.js
Aaron Chen a931316a53
Introduce QR based signer into MetaMask (#12065)
* support qr based signer

* add CSP for fire fox

* get QR Hardware wallet name from device

* fix qrHardware state missing in runtime

* support qr based signer sign transaction

* refine Request Signature modal ui

* remove feature toggle

* refine ui

* fix notification is closing even there is a pending qr hardware transaction

* add chinese translation, refine ui, fix qr process was breaking in some case

* support import accounts by pubkeys

* refine qr-based wallet ui and fix bugs

* update @keystonehq/metamask-airgapped-keyring to fix that the signing hd path was inconsistent in some edge case

* fix: avoid unnecessay navigation, fix ci

* refactor qr-hardware-popover with @zxing/browser

* update lavamoat policy, remove firefox CSP

* refine qr reader ui, ignore unnecessary warning display

* code refactor, use async functions insteads promise

Co-authored-by: Soralit <soralitria@gmail.com>
2021-11-23 13:58:39 -03:30

68 lines
1.8 KiB
JavaScript

import React, { useEffect, useMemo, useState } from 'react';
import { BarcodeFormat, DecodeHintType } from '@zxing/library';
import { BrowserQRCodeReader } from '@zxing/browser';
import log from 'loglevel';
import PropTypes from 'prop-types';
import { MILLISECOND } from '../../../../shared/constants/time';
import Spinner from '../../ui/spinner';
const EnhancedReader = ({ handleScan }) => {
const [canplay, setCanplay] = useState(false);
const codeReader = useMemo(() => {
const hint = new Map();
hint.set(DecodeHintType.POSSIBLE_FORMATS, [BarcodeFormat.QR_CODE]);
return new BrowserQRCodeReader(hint, {
delayBetweenScanAttempts: MILLISECOND * 100,
delayBetweenScanSuccess: MILLISECOND * 100,
});
}, []);
useEffect(() => {
const videoElem = document.getElementById('video');
const canplayListener = () => {
setCanplay(true);
};
videoElem.addEventListener('canplay', canplayListener);
const promise = codeReader.decodeFromVideoDevice(
undefined,
'video',
(result) => {
if (result) {
handleScan(result.getText());
}
},
);
return () => {
videoElem.removeEventListener('canplay', canplayListener);
promise
.then((controls) => {
if (controls) {
controls.stop();
}
})
.catch(log.info);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div className="qr-scanner__content__video-wrapper">
<video
id="video"
style={{
display: canplay ? 'block' : 'none',
width: '100%',
filter: 'blur(4px)',
}}
/>
{canplay ? null : <Spinner color="#F7C06C" />}
</div>
);
};
EnhancedReader.propTypes = {
handleScan: PropTypes.func.isRequired,
};
export default EnhancedReader;