import Operation from 'components/operations/Operation'; import React from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; import {translate} from 'utils/localize'; import {ConnectionStatus, Indicator} from './StatusIndicator'; const LOGO_LIGHT = require('assets/has/full-logo-light.png'); const HASInfo = () => { return ( <Operation logo={<Image source={LOGO_LIGHT} style={{width: 270, height: 40}} />} title=""> <View style={styles.view}> <Text style={styles.header}>{translate('wallet.has.info.h1')}</Text> <Text style={styles.text}>{translate('wallet.has.info.t1')}</Text> <Text style={styles.header}>{translate('wallet.has.info.h2')}</Text> <Text style={styles.text}>{translate('wallet.has.info.t2')}</Text> <Text style={styles.header}>{translate('wallet.has.info.h3')}</Text> <IndicatorDescription status={ConnectionStatus.VOID} rootString={'wallet.has.info.indicator.grey'} /> <IndicatorDescription status={ConnectionStatus.CONNECTED} rootString={'wallet.has.info.indicator.green'} longPress /> <IndicatorDescription status={ConnectionStatus.DISCONNECTED} rootString={'wallet.has.info.indicator.red'} press longPress /> </View> </Operation> ); }; const IndicatorDescription = ({ status, rootString, press, longPress, }: { status: ConnectionStatus; rootString: string; press?: boolean; longPress?: boolean; }) => { return ( <View> <View style={styles.indicatorHeader}> <View style={styles.indicatorWrapper}> <Indicator status={status} /> </View> <Text> <Text style={styles.indicatorHeaderText}> {translate(`${rootString}.title`)} </Text> </Text> </View> {press ? ( <Text style={styles.detail}> <Text style={styles.indicatorPress}> {translate(`wallet.has.info.indicator.press`)} :{' '} </Text> <Text style={styles.text}>{translate(`${rootString}.press`)}</Text> </Text> ) : null} {longPress ? ( <Text style={styles.detail}> <Text style={styles.indicatorPress}> {translate(`wallet.has.info.indicator.longPress`)} :{' '} </Text> <Text style={styles.text}> {translate(`${rootString}.longPress`)} </Text> </Text> ) : null} </View> ); }; const styles = StyleSheet.create({ view: { flex: 1, marginVertical: 30, flexDirection: 'column', justifyContent: 'space-between', }, header: { fontWeight: 'bold', fontSize: 16, marginTop: 10, }, text: {}, indicatorHeader: {flexDirection: 'row', marginTop: 5}, indicatorHeaderText: {fontWeight: 'bold'}, indicatorPress: {fontStyle: 'italic'}, detail: {marginLeft: 40}, indicatorWrapper: { width: 32, justifyContent: 'center', flexDirection: 'row', alignItems: 'center', }, }); export default HASInfo;