/
AddressVerifyModal.tsx
113 lines (99 loc) · 2.96 KB
/
AddressVerifyModal.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import React from 'react'
import {defineMessages, useIntl} from 'react-intl'
import {ActivityIndicator, ScrollView, View} from 'react-native'
import {StyleSheet} from 'react-native'
import HWInstructions from '../../legacy/components/Ledger/HWInstructions'
import {Button, Modal, Text} from '../../legacy/components/UiKit'
import {confirmationMessages} from '../../legacy/i18n/global-messages'
import {COLORS, spacing} from '../../legacy/styles/config'
type Props = {
visible: boolean
onConfirm: () => void
onRequestClose: () => void
address: string
path: string
isWaiting: boolean
useUSB: boolean
}
export const AddressVerifyModal = ({visible, onConfirm, onRequestClose, address, path, isWaiting, useUSB}: Props) => {
const strings = useStrings()
return (
<Modal visible={visible} onRequestClose={onRequestClose} showCloseIcon>
<ScrollView style={styles.scrollView}>
<View style={styles.heading}>
<Text style={styles.title}>{strings.title}</Text>
</View>
<HWInstructions useUSB={useUSB} />
<Text style={styles.paragraph}>{strings.afterConfirm}</Text>
<View style={styles.addressDetailsView}>
<Text secondary style={styles.paragraph}>
{address}
</Text>
<Text secondary style={styles.paragraph}>
{path}
</Text>
</View>
<Button onPress={onConfirm} title={strings.confirmButton} style={styles.button} disabled={isWaiting} />
{isWaiting && <ActivityIndicator color="black" />}
</ScrollView>
</Modal>
)
}
const messages = defineMessages({
title: {
id: 'components.receive.addressverifymodal.title',
defaultMessage: '!!!Verify Address on Ledger',
},
afterConfirm: {
id: 'components.receive.addressverifymodal.afterConfirm',
defaultMessage:
'!!!Once you tap on confirm, validate the address on your Ledger ' +
'device, making sure both the path and the address match what is shown ' +
'below:',
},
})
const useStrings = () => {
const intl = useIntl()
return {
title: intl.formatMessage(messages.title),
afterConfirm: intl.formatMessage(messages.afterConfirm),
confirmButton: intl.formatMessage(confirmationMessages.commonButtons.confirmButton),
}
}
const styles = StyleSheet.create({
scrollView: {
paddingRight: 10,
marginBottom: 12,
},
paragraph: {
marginBottom: 12,
fontSize: 14,
lineHeight: 22,
},
heading: {
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
lineHeight: 22,
fontWeight: 'bold',
marginBottom: spacing.paragraphBottomMargin,
},
button: {
marginHorizontal: 10,
},
addressDetailsView: {
alignItems: 'center',
justifyContent: 'center',
elevation: 1,
shadowOffset: {width: 2, height: 2},
shadowRadius: 12,
shadowOpacity: 1,
shadowColor: COLORS.SHADOW_COLOR,
backgroundColor: '#fff',
borderRadius: 8,
marginBottom: 10,
padding: 8,
},
})