diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml index 9778959a..18930734 100644 --- a/.github/workflows/cla.yml +++ b/.github/workflows/cla.yml @@ -21,6 +21,6 @@ jobs: path-to-signatures: 'signatures/version1/cla.json' path-to-cla-document: 'https://github.com/gnosis/safe-react/blob/master/GNOSISCLA.md' branch: 'cla-signatures' - allowlist: lukasschor,mikheevm,rmeissner,germartinez,fernandomg,Agupane,nicosampler,matextrem,gabitoesmiapodo,davidalbela,alongoni,Uxio0,dasanra,miguelmota,francovenica,tschubotz,luarx,giacomolicari,gnosis-info,bot* + allowlist: lukasschor,mikheevm,rmeissner,germartinez,fernandomg,Agupane,nicosampler,matextrem,gabitoesmiapodo,davidalbela,alongoni,Uxio0,dasanra,miguelmota,francovenica,tschubotz,luarx,giacomolicari,gnosis-info,bot*,katspaugh empty-commit-flag: false blockchain-storage-flag: false diff --git a/src/components/ScanQRModal/ScanQRWrapper/index.tsx b/src/components/ScanQRModal/ScanQRWrapper/index.tsx index 110845ae..939076c4 100644 --- a/src/components/ScanQRModal/ScanQRWrapper/index.tsx +++ b/src/components/ScanQRModal/ScanQRWrapper/index.tsx @@ -27,7 +27,7 @@ export const ScanQRWrapper = ({ handleScan }: Props): ReactElement => { setQrModalOpen(false) } - const onScanFinished = (value) => { + const onScanFinished = (value: string) => { handleScan(value, closeQrModal) } diff --git a/src/components/ScanQRModal/index.tsx b/src/components/ScanQRModal/index.tsx index 3abaa4bb..08609e04 100644 --- a/src/components/ScanQRModal/index.tsx +++ b/src/components/ScanQRModal/index.tsx @@ -1,4 +1,3 @@ -import { Loader } from '@gnosis.pm/safe-react-components' import IconButton from '@material-ui/core/IconButton' import { makeStyles } from '@material-ui/core/styles' import Close from '@material-ui/icons/Close' @@ -6,7 +5,6 @@ import * as React from 'react' import QrReader from 'react-qr-reader' import { styles } from './style' -import { checkWebcam } from './utils' import Modal from 'src/components/Modal' import Block from 'src/components/layout/Block' @@ -27,45 +25,39 @@ type Props = { export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElement => { const classes = useStyles() - const [useWebcam, setUseWebcam] = useState(null) const [fileUploadModalOpen, setFileUploadModalOpen] = useState(false) const [error, setError] = useState(null) + const [cameraBlocked, setCameraBlocked] = useState(false) const scannerRef: any = React.createRef() const openImageDialog = React.useCallback(() => { scannerRef.current.openImageDialog() }, [scannerRef]) useEffect(() => { - checkWebcam( - () => { - setUseWebcam(true) - }, - () => { - setUseWebcam(false) - }, - ) - }, []) - - useEffect(() => { - if (useWebcam === false && !fileUploadModalOpen && !error) { + if (!fileUploadModalOpen && cameraBlocked && !error) { setFileUploadModalOpen(true) openImageDialog() } - }, [useWebcam, openImageDialog, fileUploadModalOpen, setFileUploadModalOpen, error]) + }, [cameraBlocked, openImageDialog, fileUploadModalOpen, setFileUploadModalOpen, error]) + + const onFileScannedResolve = (error: Error | null, successData: string | null) => { + if (error) { + console.error('QR code error', error) + + if (error.name === 'NotAllowedError' || error.name === 'PermissionDismissedError') { + setCameraBlocked(true) + setFileUploadModalOpen(false) + } else { + setError('The QR could not be read') + } + return + } - const onFileScannedResolve = (error: string | null, successData: string | null) => { if (successData) { onScan(successData) + } else if (cameraBlocked) { + setError('The QR could not be read') } - if (error) { - console.error('Error uploading file', error) - setError(`The QR could not be read`) - } - if (!useWebcam) { - setError(`The QR could not be read`) - } - - setFileUploadModalOpen(false) } return ( @@ -80,20 +72,19 @@ export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElem - {error} - {useWebcam === null ? ( - - + {error && ( + + {error} - ) : ( - onFileScannedResolve(err, null)} - onScan={(data) => onFileScannedResolve(null, data)} - ref={scannerRef} - style={{ width: '400px', height: '400px' }} - /> )} + onFileScannedResolve(err, null)} + onScan={(data: string) => onFileScannedResolve(null, data)} + ref={scannerRef} + style={{ width: '400px', height: '400px' }} + facingMode="user" + /> @@ -105,7 +96,7 @@ export const ScanQRModal = ({ isOpen, onClose, onScan }: Props): React.ReactElem color="primary" minWidth={154} onClick={() => { - setUseWebcam(false) + setCameraBlocked(true) setError(null) setFileUploadModalOpen(false) }} diff --git a/src/components/ScanQRModal/style.ts b/src/components/ScanQRModal/style.ts index 9181360a..6cd01dc8 100644 --- a/src/components/ScanQRModal/style.ts +++ b/src/components/ScanQRModal/style.ts @@ -19,7 +19,7 @@ export const styles = createStyles({ }, detailsContainer: { backgroundColor: background, - maxHeight: '420px', + maxHeight: '450px', }, buttonRow: { height: '84px', diff --git a/src/components/ScanQRModal/utils.ts b/src/components/ScanQRModal/utils.ts deleted file mode 100644 index ef2c02cb..00000000 --- a/src/components/ScanQRModal/utils.ts +++ /dev/null @@ -1,18 +0,0 @@ -const navigatorCp: any = navigator - -navigatorCp.getMedia = - navigatorCp.getUserMedia || // use the proper vendor prefix - navigatorCp.webkitGetUserMedia || - navigatorCp.mozGetUserMedia || - navigatorCp.msGetUserMedia - -export const checkWebcam = (success, err) => - navigatorCp.getMedia( - { video: true }, - () => { - success() - }, - () => { - err() - }, - )