/
ContactIdentity.js
96 lines (90 loc) · 2.78 KB
/
ContactIdentity.js
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
import React from 'react'
import { View, Platform, Text as RNText } from 'react-native'
import { Avatar, Text } from '.'
import { createMaterialTopTabNavigator } from 'react-navigation'
import QRGenerator from './QRGenerator'
import { makeShareableUrl } from '../../helpers/contacts'
import colors from '../../constants/colors'
import { formattedFingerprint } from '../../helpers/fingerprint'
import { padding } from '../../styles'
import { tabIcon, withScreenProps } from '../../helpers/views'
import { monospaceFont, tabNavigatorOptions } from '../../constants/styling'
const PublicKey = ({ data: { id } }) => <View
style={[{ flexDirection: 'row', justifyContent: 'center' }, padding]}>
<RNText style={{
textAlign: 'left',
width: 248,
height: 248,
backgroundColor: colors.inputGrey,
color: colors.fakeBlack,
borderRadius: 8,
flexWrap: 'wrap',
fontFamily: monospaceFont,
padding: 8,
}}>{id}</RNText>
</View>
const QrCode = ({ data: { id, displayName } }) => <View
style={[{ flexDirection: 'row', justifyContent: 'center' }]}>
<QRGenerator
value={makeShareableUrl({ id, displayName })}
size={248}
style={[{ marginTop: 16, marginBottom: 16 }]}
/>
</View>
const Fingerprint = ({ data: { id } }) => <View
style={[{ flexDirection: 'row', justifyContent: 'center' }, padding]}>
<RNText style={{
textAlign: 'center',
width: 248,
backgroundColor: colors.blue25,
color: colors.blue,
borderRadius: 8,
flexWrap: 'wrap',
fontSize: 18,
fontFamily: monospaceFont,
padding: 8,
}}>
{formattedFingerprint(id)}
</RNText>
</View>
const ContactIdentityTabbedContent = createMaterialTopTabNavigator(
{
'qrcode': {
screen: withScreenProps(QrCode),
navigationOptions: {
title: 'QR Code',
tabBarIcon: tabIcon('material-qrcode'),
},
},
'public-key': {
screen: withScreenProps(PublicKey),
navigationOptions: {
title: 'Public key',
tabBarIcon: tabIcon('material-key-variant'),
},
},
'fingerprint': {
screen: withScreenProps(Fingerprint),
navigationOptions: {
title: 'Fingerprint',
tabBarIcon: tabIcon('material-fingerprint'),
},
},
},
{
initialRouteName: 'qrcode',
...tabNavigatorOptions,
},
)
const ContactIdentity = ({ data }) => <>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<Avatar data={data} size={78} style={{ marginTop: 0 }} />
</View>
<Text large color={colors.fakeBlack} center padding>{data.displayName}</Text>
<View
style={{ marginLeft: 15, marginRight: 15, marginBottom: 8, height: Platform.OS === 'android' ? 330 : undefined }}>
{<ContactIdentityTabbedContent screenProps={{ data }} />}
</View>
</>
export default ContactIdentity
ContactIdentity.QrCode = QrCode