/
App.tsx
98 lines (87 loc) · 2.91 KB
/
App.tsx
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import React from 'react'
import { StyleSheet, View, Text, Button } from 'react-native'
import Config from 'react-native-config'
import { UnreachableCaseError } from 'ts-essentials'
import { useLazyVerifiedLocation, UnveilerClient, PointClaim } from '@unveiler.io/react-native-client'
// Create our ClaimR Client
const apiKey = Config.UNVEILER_API_KEY
const client = new UnveilerClient({ apiKey })
// Render tokens received from the ClaimR API
const VerifiedLocationTokenAsText = ({ claim, jwt }: { claim: PointClaim; jwt: string }) => (
<>
<Text style={styles.header}>Verified Location Token Granted</Text>
<Text>
<Text style={styles.label}>Location</Text>
<Text> within {claim.radius}m of </Text>
<Text selectable>
{claim.location.latitude}, {claim.location.longitude}
</Text>
</Text>
<Text>
<Text style={styles.label}>JWT</Text> <Text selectable>{jwt}</Text>
</Text>
</>
)
const VerifyLocation = () => {
// Register the lazy location verification hook.
const { state, claim, jwt, message, submit, progress } = useLazyVerifiedLocation({ client })
// Define how our send button looks depending on the verified location state
const SendButton = () => {
if (state === 'submitting') {
return (
<Button title={'Verifying Location Based on GNSS Data'} disabled={true} onPress={console.error} />
)
} else if (state === 'listening') {
const title = progress
? `Collecting GNSS Data (${progress.current}/${progress.target})`
: 'Collecting GNSS Data'
return <Button title={title} disabled={true} onPress={console.error} />
} else if (state === 'registeringListener') {
return <Button title={'Registering GNSS Listener'} disabled={true} onPress={console.error} />
} else if (state === 'ready' || state === 'success' || state === 'failed' || state === 'revoked') {
return <Button title={'Get Location Verified'} onPress={submit ?? console.error} />
} else {
// We should have covered all states previously
throw new UnreachableCaseError(state)
}
}
return (
<>
<SendButton />
{claim && jwt && state === 'success' && <VerifiedLocationTokenAsText claim={claim} jwt={jwt} />}
{state === 'failed' && <Text style={styles.header}>Location Verification Failed</Text>}
{message && (
<Text>
<Text style={styles.label}>Message</Text> {message}
</Text>
)}
</>
)
}
const App = () => {
return (
<View style={styles.container}>
<Text>API Key: {apiKey.length > 20 ? apiKey.substr(0, 20) + '...' : apiKey}</Text>
<VerifyLocation />
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 10,
},
button: {
minHeight: 30,
},
header: {
fontSize: 20,
marginTop: 30,
},
label: {
fontWeight: 'bold',
},
})
export default App