1import * as React from 'react'
2import * as Kb from '../../common-adapters/mobile.native'
3import * as QR from '../../common-adapters/qr.native'
4import * as Styles from '../../styles'
5import {Props} from '.'
6
7const QRScan = (props: Props) => (
8  <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.container}>
9    <Kb.SafeAreaViewTop style={styles.safeAreaViewTop} />
10    <Kb.Text type="BodyBigLink" style={styles.cancel} onClick={() => props.onSubmitCode(null)}>
11      Cancel
12    </Kb.Text>
13    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.topContainer} gap="small">
14      <Kb.Box2 direction="vertical" style={styles.cameraContainer}>
15        <QR.QRScanner
16          notAuthorizedView={<QR.QRNotAuthorized />}
17          onBarCodeRead={data => props.onSubmitCode(data)}
18          style={styles.camera}
19        />
20        <QR.QRLines canScan={true} color={Styles.globalColors.purpleLight} />
21      </Kb.Box2>
22      <Kb.Text center={true} type="BodySemibold" style={styles.text}>
23        Scan a Stellar QR code.
24      </Kb.Text>
25    </Kb.Box2>
26    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.bottomContainer} gap="small">
27      <Kb.InfoNote color={Styles.globalColors.white_20} />
28      <Kb.Text center={true} type="BodySmall" style={styles.text}>
29        You can find your own QR code by tapping the 'Receive' button on your account page.
30      </Kb.Text>
31    </Kb.Box2>
32  </Kb.Box2>
33)
34
35const styles = Styles.styleSheetCreate(
36  () =>
37    ({
38      bottomContainer: {
39        paddingBottom: Styles.globalMargins.xlarge,
40        paddingLeft: Styles.globalMargins.large,
41        paddingRight: Styles.globalMargins.large,
42      },
43      camera: {
44        alignSelf: 'center',
45        height: '100%',
46        width: '100%',
47      },
48      cameraContainer: {
49        alignSelf: 'center',
50        backgroundColor: Styles.globalColors.black,
51        borderColor: Styles.globalColors.purpleLight,
52        borderRadius: Styles.borderRadius,
53        borderStyle: 'solid',
54        borderWidth: 4,
55        height: 200,
56        overflow: 'hidden',
57        position: 'relative',
58        width: 200,
59      },
60      cancel: {
61        alignSelf: 'flex-start',
62        color: Styles.globalColors.white,
63        minHeight: Styles.globalMargins.xlarge - Styles.statusBarHeight,
64        paddingBottom: 8,
65        paddingLeft: Styles.globalMargins.small,
66        paddingRight: Styles.globalMargins.small,
67        paddingTop: 8,
68      },
69      container: {
70        alignItems: 'center',
71        backgroundColor: Styles.globalColors.purpleDark,
72      },
73      header: {
74        backgroundColor: Styles.globalColors.transparent,
75        width: '100%',
76      },
77      safeAreaViewTop: {backgroundColor: Styles.globalColors.purpleDark, flexGrow: 0},
78      text: {color: Styles.globalColors.white},
79      topContainer: {
80        alignItems: 'center',
81        flexGrow: 1,
82        justifyContent: 'center',
83      },
84    } as const)
85)
86
87export default QRScan
88