Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import { useStore } from 'nanostores/react'
import React from 'react'
import styled from 'styled-components'
import {
cameraAllowed as cameraAllowedStore,
requestCameraAllowed,
} from '../stores/media'
import { BaseProps } from '../types'
import { isPopup } from '../utils/isPopup'
import { windowOpen } from '../utils/messaging'
import { Button } from './Button'
const Media: React.FC<BaseProps> = ({ className }) => {
const cameraAllowed = useStore(cameraAllowedStore)
const canGrant = !isPopup()
const open = () => windowOpen('/')
if (cameraAllowed) return null
return (
<div className={className}>
<div className='message'>
The extension needs access to your camera to scan qr codes from a Parity
Signer. Open it in new page and give camera access.
</div>
{!canGrant && <Button onClick={open}>Open</Button>}
{canGrant && <Button onClick={requestCameraAllowed}>Grant access</Button>}
</div>
)
}
export default styled(Media)`
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.5rem 0.5rem 0;
padding: 0.5rem;
background: ${({ theme }: BaseProps) => theme.cardBgColor};
border-radius: 0.2rem;
.message {
font-size: ${({ theme }: BaseProps) => theme.smallFontSize};
padding-right: 1rem;
}
`