mirrors/BlueWallet
1
0
Fork 0
mirror of https://github.com/BlueWallet/BlueWallet.git synced 2025-02-22 23:08:07 +01:00
Code Issues Projects Releases Packages Wiki Activity

OPS: Upgrade RN elements

Browse source
This commit is contained in:
Marcos Rodriguez Vélez 2020-05-03 14:17:49 -04:00 • committed by GitHub
parent 9232d344e3
commit 13572c8775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 304 additions and 372 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
BlueComponents.js
View file

@ -2,7 +2,7 @@
import React, { Component, useEffect, useState } from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import PropTypes from 'prop-types';
import { Icon, FormLabel, FormInput, Text, Header, List, ListItem } from 'react-native-elements';
import { Icon, Input, Text, Header, ListItem } from 'react-native-elements';
import {
TouchableOpacity,
TouchableWithoutFeedback,
@ -20,6 +20,7 @@ import {
InputAccessoryView,
Clipboard,
Platform,
FlatList,
TextInput,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
@ -587,7 +588,7 @@ export class BlueListItem extends Component {
paddingBottom: 16,
}}
titleStyle={{
color: BlueApp.settings.foregroundColor,
color: this.props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.foregroundColor,
fontSize: 16,
fontWeight: '500',
marginLeft: 16,
@ -595,6 +596,7 @@ export class BlueListItem extends Component {
subtitleStyle={{ color: BlueApp.settings.alternativeTextColor, marginLeft: 16, fontWeight: '400', width: 230 }}
subtitleNumberOfLines={1}
titleNumberOfLines={0}
Component={TouchableOpacity}
{...this.props}
/>
);
@ -603,14 +605,14 @@ export class BlueListItem extends Component {
export class BlueFormLabel extends Component {
render() {
return <FormLabel {...this.props} labelStyle={{ color: BlueApp.settings.foregroundColor, fontWeight: '400' }} />;
return <Text {...this.props} style={{ color: BlueApp.settings.foregroundColor, fontWeight: '400', marginLeft: 20 }} />;
}
}
export class BlueFormInput extends Component {
render() {
return (
<FormInput
<Input
{...this.props}
inputStyle={{ color: BlueApp.settings.foregroundColor, maxWidth: width - 105 }}
containerStyle={{
@ -684,6 +686,7 @@ export class BlueHeaderDefaultSub extends Component {
<SafeAreaView style={{ backgroundColor: BlueApp.settings.brandingColor }}>
<Header
backgroundColor={BlueApp.settings.brandingColor}
leftContainerStyle={{ minWidth: '100%' }}
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
@ -732,11 +735,8 @@ export class BlueHeaderDefaultMain extends Component {
<Header
{...this.props}
backgroundColor={BlueApp.settings.brandingColor}
outerContainerStyles={{
borderBottomColor: 'transparent',
borderBottomWidth: 0,
}}
statusBarProps={{ barStyle: 'default' }}
leftContainerStyle={{ minWidth: '100%' }}
leftComponent={
<Text
numberOfLines={0}
@ -813,17 +813,7 @@ export class BlueSpacing10 extends Component {
export class BlueList extends Component {
render() {
return (
<List
{...this.props}
containerStyle={{
backgroundColor: BlueApp.settings.brandingColor,
borderTopColor: 'transparent',
borderTopWidth: 0,
flex: 1,
}}
/>
);
return <FlatList {...this.props} />;
}
}
@ -999,6 +989,7 @@ const stylesBlueIcon = StyleSheet.create({
borderRadius: 15,
backgroundColor: '#d2f8d6',
transform: [{ rotate: '-45deg' }],
justifyContent: 'center',
},
ballIncomingWithoutRotate: {
width: 30,
@ -1019,6 +1010,7 @@ const stylesBlueIcon = StyleSheet.create({
borderRadius: 15,
backgroundColor: '#f8d2d2',
transform: [{ rotate: '225deg' }],
justifyContent: 'center',
},
ballOutgoingWithoutRotate: {
width: 30,
@ -1031,6 +1023,7 @@ const stylesBlueIcon = StyleSheet.create({
height: 30,
borderRadius: 15,
backgroundColor: '#EEF0F4',
justifyContent: 'center',
},
ballTransparrent: {
width: 30,
@ -1075,14 +1068,7 @@ export class BlueTransactionIncomingIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballIncoming}>
<Icon
{...this.props}
name="arrow-down"
size={16}
type="font-awesome"
color={BlueApp.settings.incomingForegroundColor}
iconStyle={{ left: 0, top: 8 }}
/>
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color={BlueApp.settings.incomingForegroundColor} />
</View>
</View>
</View>
@ -1152,14 +1138,7 @@ export class BlueTransactionOffchainIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballOutgoingWithoutRotate}>
<Icon
{...this.props}
name="bolt"
size={16}
type="font-awesome"
color={BlueApp.settings.outgoingForegroundColor}
iconStyle={{ left: 0, top: 7 }}
/>
<Icon {...this.props} name="bolt" size={16} type="font-awesome" color={BlueApp.settings.outgoingForegroundColor} />
</View>
</View>
</View>
@ -1173,14 +1152,7 @@ export class BlueTransactionOffchainIncomingIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballIncomingWithoutRotate}>
<Icon
{...this.props}
name="bolt"
size={16}
type="font-awesome"
color={BlueApp.settings.incomingForegroundColor}
iconStyle={{ left: 0, top: 7 }}
/>
<Icon {...this.props} name="bolt" size={16} type="font-awesome" color={BlueApp.settings.incomingForegroundColor} />
</View>
</View>
</View>
@ -1194,14 +1166,7 @@ export class BlueTransactionOutgoingIcon extends Component {
<View {...this.props}>
<View style={stylesBlueIcon.boxIncoming}>
<View style={stylesBlueIcon.ballOutgoing}>
<Icon
{...this.props}
name="arrow-down"
size={16}
type="font-awesome"
color={BlueApp.settings.outgoingForegroundColor}
iconStyle={{ left: 0, top: 8 }}
/>
<Icon {...this.props} name="arrow-down" size={16} type="font-awesome" color={BlueApp.settings.outgoingForegroundColor} />
</View>
</View>
</View>
@ -1571,19 +1536,15 @@ export const BlueTransactionListItem = ({ item, itemPriceUnit = BitcoinUnit.BTC,
return (
<BlueListItem
avatar={avatar()}
leftAvatar={avatar()}
title={transactionTimeToReadable}
titleNumberOfLines={subtitleNumberOfLines}
subtitle={subtitle()}
subtitleNumberOfLines={subtitleNumberOfLines}
onPress={onPress}
onLongPress={onLongPress}
badge={{
value: 3,
textStyle: { color: 'orange' },
containerStyle: { marginTop: 0 },
}}
hideChevron
chevron
Component={TouchableOpacity}
rightTitle={rowTitle()}
rightTitleStyle={rowTitleStyle()}
/>
@ -1766,11 +1727,6 @@ export class BlueListTransactionItem extends Component {
title={loc.transactionTimeToReadable(this.props.item.received)}
subtitle={this.subtitle()}
onPress={this.onPress}
badge={{
value: 3,
textStyle: { color: 'orange' },
containerStyle: { marginTop: 0 },
}}
hideChevron
rightTitle={this.rowTitle()}
rightTitleStyle={this.rowTitleStyle()}

276
package-lock.json generated
View file

@ -1935,6 +1935,37 @@
"resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
"integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ=="
},
"@types/prop-types": {
"version": "15.7.3",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
"integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
},
"@types/react": {
"version": "16.9.34",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.34.tgz",
"integrity": "sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==",
"requires": {
"@types/prop-types": "*",
"csstype": "^2.2.0"
}
},
"@types/react-native": {
"version": "0.62.5",
"resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.5.tgz",
"integrity": "sha512-x6ZBbo752yAw5XUarOyh53oNgMuafL4EhWEbd4ARSMK6Y7nTRm2a1tBHy8Fp7h7ji0XXJrxNRTXGJRRP3+MWzg==",
"requires": {
"@types/react": "*"
}
},
"@types/react-native-vector-icons": {
"version": "6.4.5",
"resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.5.tgz",
"integrity": "sha512-JBpcjWQE4n0GlE0p6HpDDclT+uXpFC453T5k4h+B38q0utlGJhvgNr8899BoJGc1xOktA2cgqFKmFMJd0h7YaA==",
"requires": {
"@types/react": "*",
"@types/react-native": "*"
}
},
"@types/stack-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@ -2679,23 +2710,6 @@
"babel-runtime": "^6.22.0"
}
},
"babel-polyfill": {
"version": "6.23.0",
"resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz",
"integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=",
"requires": {
"babel-runtime": "^6.22.0",
"core-js": "^2.4.0",
"regenerator-runtime": "^0.10.0"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.10.5",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
"integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
}
}
},
"babel-preset-fbjs": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/babel-preset-fbjs/-/babel-preset-fbjs-3.3.0.tgz",
@ -2779,6 +2793,7 @@
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
"dev": true,
"requires": {
"core-js": "^2.4.0",
"regenerator-runtime": "^0.11.0"
@ -2787,7 +2802,8 @@
"regenerator-runtime": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
"dev": true
}
}
},
@ -3777,6 +3793,15 @@
"object-visit": "^1.0.0"
}
},
"color": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
"integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
"requires": {
"color-convert": "^1.9.1",
"color-string": "^1.5.2"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@ -3790,6 +3815,15 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
"integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"color-support": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@ -4170,6 +4204,11 @@
"cssom": "0.3.x"
}
},
"csstype": {
"version": "2.6.10",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.10.tgz",
"integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@ -6747,6 +6786,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
"integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
},
@ -6754,7 +6794,8 @@
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
}
}
},
@ -8477,11 +8518,6 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash.isempty": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.isempty/-/lodash.isempty-4.4.0.tgz",
"integrity": "sha1-b4bL7di+TsmHvpqvM8loTbGzHn4="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@ -8505,11 +8541,6 @@
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
},
"lodash.times": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/lodash.times/-/lodash.times-4.3.2.tgz",
"integrity": "sha1-Ph8lZcQxdU1Uq1fy7RdBk5KFyh0="
},
"lodash.unescape": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@ -9953,118 +9984,10 @@
"is-wsl": "^1.1.0"
}
},
"opencollective": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz",
"integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=",
"requires": {
"babel-polyfill": "6.23.0",
"chalk": "1.1.3",
"inquirer": "3.0.6",
"minimist": "1.2.0",
"node-fetch": "1.6.3",
"opn": "4.0.2"
},
"dependencies": {
"ansi-escapes": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
"integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
},
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
},
"ansi-styles": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
"integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"requires": {
"ansi-styles": "^2.2.1",
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0",
"supports-color": "^2.0.0"
}
},
"chardet": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
"integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
},
"external-editor": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
"integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
"requires": {
"chardet": "^0.4.0",
"iconv-lite": "^0.4.17",
"tmp": "^0.0.33"
}
},
"inquirer": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz",
"integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=",
"requires": {
"ansi-escapes": "^1.1.0",
"chalk": "^1.0.0",
"cli-cursor": "^2.1.0",
"cli-width": "^2.0.0",
"external-editor": "^2.0.1",
"figures": "^2.0.0",
"lodash": "^4.3.0",
"mute-stream": "0.0.7",
"run-async": "^2.2.0",
"rx": "^4.1.0",
"string-width": "^2.0.0",
"strip-ansi": "^3.0.0",
"through": "^2.3.6"
}
},
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
},
"node-fetch": {
"version": "1.6.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
"integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
"requires": {
"encoding": "^0.1.11",
"is-stream": "^1.0.1"
}
},
"opn": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
"integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=",
"requires": {
"object-assign": "^4.0.1",
"pinkie-promise": "^2.0.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"requires": {
"ansi-regex": "^2.0.0"
}
},
"supports-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
}
}
"opencollective-postinstall": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
"integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
},
"opn": {
"version": "5.5.0",
@ -10359,12 +10282,14 @@
"pinkie": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
"integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
"integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
"dev": true
},
"pinkie-promise": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
"integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
"dev": true,
"requires": {
"pinkie": "^2.0.0"
}
@ -11728,21 +11653,30 @@
"from": "git+https://github.com/BlueWallet/react-native-document-picker.git#9ce83792db340d01b1361d24b19613658abef4aa"
},
"react-native-elements": {
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-0.19.0.tgz",
"integrity": "sha1-c3xRmL90h/mYbiAjgmzQvXpQA2Y=",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-2.0.0.tgz",
"integrity": "sha512-xViTU/JlabYX94fDL2iu17gvMtgEOq2lFAToYlU3RBkwb/J13cdwSr8Ti9z6v6Iui4f8S3FjkpRJnFaOsZrK7w==",
"requires": {
"lodash.isempty": "^4.4.0",
"lodash.times": "^4.3.2",
"opencollective": "^1.0.3",
"prop-types": "^15.5.8"
"@types/react-native-vector-icons": "^6.4.4",
"color": "^3.1.0",
"deepmerge": "^3.1.0",
"hoist-non-react-statics": "^3.1.0",
"opencollective-postinstall": "^2.0.0",
"prop-types": "^15.7.2",
"react-native-ratings": "^6.5.0",
"react-native-status-bar-height": "^2.2.0"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
}
}
},
"react-native-flexi-radio-button": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/react-native-flexi-radio-button/-/react-native-flexi-radio-button-0.2.2.tgz",
"integrity": "sha1-oBgDk8UxujR3cixuQqMc6xwRYjs="
},
"react-native-fs": {
"version": "2.16.6",
"resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.16.6.tgz",
@ -11858,6 +11792,15 @@
"resolved": "https://registry.npmjs.org/react-native-rate/-/react-native-rate-1.1.10.tgz",
"integrity": "sha512-07L5923RpL+AdnsZCQSkiMbRi/7N/OJtZ6AWAl5bZyhncDD7L1ap94H3jtV7uFW5WGBNxMnGiC4fPLzn426mMw=="
},
"react-native-ratings": {
"version": "6.5.0",
"resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-6.5.0.tgz",
"integrity": "sha512-YMcfQ7UQCmXGEc/WPlukHSHs5yvckTwjq5fTRk1FG8gaO7fZCNygEUGPuw4Dbvvp3IlsCUn0bOQd63RYsb7NDQ==",
"requires": {
"lodash": "^4.17.4",
"prop-types": "^15.5.10"
}
},
"react-native-safe-area-view": {
"version": "0.14.8",
"resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.8.tgz",
@ -11908,6 +11851,11 @@
"prop-types": "^15.5.10"
}
},
"react-native-status-bar-height": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.5.0.tgz",
"integrity": "sha512-sYBCPYA/NapBSHkdm/IVL4ID3LLlIuLqINi2FBDyMkc2BU9pfSGOtkz9yfxoK39mYJuTrlTOQ7mManARUsYDSA=="
},
"react-native-svg": {
"version": "9.13.6",
"resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.13.6.tgz",
@ -12624,11 +12572,6 @@
"integrity": "sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==",
"dev": true
},
"rx": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
"integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="
},
"rx-lite": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@ -12905,6 +12848,21 @@
"plist": "^3.0.1"
}
},
"simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
"requires": {
"is-arrayish": "^0.3.1"
},
"dependencies": {
"is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
}
}
},
"sisteransi": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",

3
package.json
View file

@ -106,8 +106,7 @@
"react-native-default-preference": "1.4.1",
"react-native-device-info": "4.0.1",
"react-native-document-picker": "git+https://github.com/BlueWallet/react-native-document-picker.git#9ce83792db340d01b1361d24b19613658abef4aa",
"react-native-elements": "0.19.0",
"react-native-flexi-radio-button": "0.2.2",
"react-native-elements": "2.0.0",
"react-native-fs": "2.16.6",
"react-native-gesture-handler": "1.6.1",
"react-native-handoff": "git+https://github.com/marcosrdz/react-native-handoff.git",

6
screen/send/details.js
View file

@ -655,10 +655,8 @@ export default class SendDetails extends Component {
{this.state.fromWallet.type === HDSegwitBech32Wallet.type && (
<BlueListItem
title="Allow Fee Bump"
hideChevron
switchButton
switched={this.state.isTransactionReplaceable}
onSwitch={this.onReplaceableFeeSwitchValueChanged}
Component={TouchableWithoutFeedback}
switch={{ value: this.state.isTransactionReplaceable, onValueChange: this.onReplaceableFeeSwitchValueChanged }}
/>
)}
{this.state.fromWallet.type === WatchOnlyWallet.type &&

17
screen/settings/GeneralSettings.js
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { ScrollView, Platform, TouchableOpacity } from 'react-native';
import { ScrollView, Platform, TouchableWithoutFeedback, TouchableOpacity } from 'react-native';
import { BlueLoading, BlueText, BlueSpacing20, BlueListItem, SafeBlueArea, BlueNavigationStyle, BlueCard } from '../../BlueComponents';
import PropTypes from 'prop-types';
import { AppStorage } from '../../class';
@ -38,12 +38,17 @@ const GeneralSettings = () => {
<ScrollView>
{BlueApp.getWallets().length > 1 && (
<>
<BlueListItem component={TouchableOpacity} onPress={() => navigate('DefaultView')} title="On Launch" />
<BlueListItem component={TouchableOpacity} onPress={() => navigate('DefaultView')} title="On Launch" chevron />
</>
)}
{Platform.OS === 'ios' ? (
<>
<BlueListItem hideChevron title={'Continuity'} switchButton onSwitch={onHandOffEnabledSwitch} switched={isHandoffUseEnabled} />
<BlueListItem
hideChevron
title={'Continuity'}
Component={TouchableWithoutFeedback}
switch={{ onValueChange: onHandOffEnabledSwitch, value: isHandoffUseEnabled }}
/>
<BlueCard>
<BlueText>
When enabled, you will be able to view selected wallets, and transactions, using your other Apple iCloud connected devices.
@ -53,11 +58,9 @@ const GeneralSettings = () => {
</>
) : null}
<BlueListItem
hideChevron
Component={TouchableWithoutFeedback}
title={loc.settings.enable_advanced_mode}
switchButton
onSwitch={onAdvancedModeSwitch}
switched={isAdancedModeEnabled}
switch={{ onValueChange: onAdvancedModeSwitch, value: isAdancedModeEnabled }}
/>
<BlueCard>
<BlueText>

3
screen/settings/about.js
View file

@ -133,6 +133,7 @@ const About = () => {
type: 'font-awesome',
color: '#9AA0AA',
}}
chevron
onPress={handleOnReleaseNotesPress}
title="Release notes"
/>
@ -142,6 +143,7 @@ const About = () => {
type: 'octicon',
color: 'black',
}}
chevron
onPress={handleOnLicensingPress}
title="MIT License"
/>
@ -151,6 +153,7 @@ const About = () => {
type: 'font-awesome',
color: '#FC0D44',
}}
chevron
onPress={handleOnSelfTestPress}
title="Run self test"
testID="RunSelfTestButton"

16
screen/settings/currency.js
View file

@ -38,8 +38,13 @@ const Currency = () => {
extraData={data}
renderItem={({ item }) => {
return (
<TouchableOpacity
<BlueListItem
disabled={isSavingNewPreferredCurrency}
title={`${item.endPointKey} (${item.symbol})`}
{...(selectedCurrency.endPointKey === item.endPointKey
? { rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" /> }
: { hideChevron: true })}
Component={TouchableOpacity}
onPress={async () => {
setIsSavingNewPreferredCurrency(true);
setSelectedCurrency(item);
@ -47,14 +52,7 @@ const Currency = () => {
await currency.startUpdater();
setIsSavingNewPreferredCurrency(false);
}}
>
<BlueListItem
title={`${item.endPointKey} (${item.symbol})`}
{...(selectedCurrency.endPointKey === item.endPointKey
? { rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" /> }
: { hideChevron: true })}
/>
</TouchableOpacity>
/>
);
}}
/>

15
screen/settings/defaultView.js
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { TouchableOpacity, View, TouchableWithoutFeedback } from 'react-native';
import { SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle, BlueListItem } from '../../BlueComponents';
import OnAppLaunch from '../../class/onAppLaunch';
import { useNavigation } from 'react-navigation-hooks';
@ -52,17 +52,18 @@ const DefaultView = () => {
<View>
<BlueListItem
title="View All Wallets"
hideChevron
switchButton
swithchEnabled={BlueApp.getWallets().length > 0}
switched={viewAllWalletsEnabled}
onSwitch={onViewAllWalletsSwitchValueChanged}
Component={TouchableWithoutFeedback}
switch={{
onValueChange: onViewAllWalletsSwitchValueChanged,
value: viewAllWalletsEnabled,
disabled: BlueApp.getWallets().length <= 0,
}}
/>
<BlueCard>
<BlueText>When disabled, BlueWallet will immediately open the selected wallet at launch.</BlueText>
</BlueCard>
{!viewAllWalletsEnabled && (
<BlueListItem title="Default into" component={TouchableOpacity} onPress={selectWallet} rightTitle={defaultWalletLabel} />
<BlueListItem title="Default into" component={TouchableOpacity} onPress={selectWallet} rightTitle={defaultWalletLabel} chevron />
)}
</View>
</SafeBlueArea>

7
screen/settings/electrumSettings.js
View file

@ -5,7 +5,6 @@ import { AppStorage } from '../../class';
import AsyncStorage from '@react-native-community/async-storage';
import { ScrollView } from 'react-native-gesture-handler';
import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueNavigationStyle, BlueText } from '../../BlueComponents';
import { Badge } from 'react-native-elements';
import PropTypes from 'prop-types';
let loc = require('../../loc');
let BlueElectrum = require('../../BlueElectrum');
@ -92,8 +91,8 @@ export default class ElectrumSettings extends Component {
<BlueCard>
<BlueText style={{ textAlign: 'center', color: '#9AA0AA', marginBottom: 4 }}>Status</BlueText>
<View style={{ width: 'auto', height: 34, flexWrap: 'wrap', justifyContent: 'center', flexDirection: 'row' }}>
<Badge
containerStyle={{
<View
style={{
backgroundColor: this.state.config.status === 1 ? '#D2F8D6' : '#F8D2D2',
paddingTop: 6,
paddingBottom: 6,
@ -105,7 +104,7 @@ export default class ElectrumSettings extends Component {
<BlueText style={{ fontWeight: '600', color: this.state.config.status === 1 ? '#37C0A1' : '#D0021B' }}>
{(this.state.config.status === 1 && 'Connected') || 'Not Connected'}
</BlueText>
</Badge>
</View>
</View>
<BlueSpacing20 />
<BlueText style={{ textAlign: 'center', color: '#0C2550' }} onPress={this.checkServer}>

39
screen/settings/encryptStorage.js
View file

@ -1,6 +1,6 @@
/* global alert */
import React, { Component } from 'react';
import { ScrollView, Alert, Platform, TouchableOpacity } from 'react-native';
import { ScrollView, Alert, Platform, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import {
BlueLoading,
BlueHeaderDefaultSub,
@ -140,11 +140,9 @@ export default class EncryptStorage extends Component {
<>
<BlueHeaderDefaultSub leftText="biometrics" rightComponent={null} />
<BlueListItem
hideChevron
title={`Use ${this.state.biometrics.biometricsType}`}
switchButton
onSwitch={this.onUseBiometricSwitch}
switched={this.state.biometrics.isBiometricsEnabled}
Component={TouchableWithoutFeedback}
switch={{ value: this.state.biometrics.isBiometricUseEnabled, onValueChange: this.onUseBiometricSwitch }}
/>
<BlueCard>
<BlueText>
@ -160,32 +158,31 @@ export default class EncryptStorage extends Component {
testID="EncyptedAndPasswordProtected"
hideChevron
title="Encypted and Password protected"
switchButton
onSwitch={this.onEncryptStorageSwitch}
switched={this.state.storageIsEncrypted}
Component={TouchableWithoutFeedback}
switch={{ onValueChange: this.onEncryptStorageSwitch, value: this.state.storageIsEncrypted }}
/>
{Platform.OS === 'ios' && this.state.storageIsEncrypted && (
<BlueListItem
hideChevron
disabled={!this.state.storageIsEncrypted}
switchDisabled={!this.state.storageIsEncrypted}
title="Delete if BlueWallet is uninstalled"
switchButton
onSwitch={this.onDeleteWalletsAfterUninstallSwitch}
switched={this.state.deleteWalletsAfterUninstall}
Component={TouchableWithoutFeedback}
switch={{
onValueChange: this.onDeleteWalletsAfterUninstallSwitch,
value: this.state.deleteWalletsAfterUninstall,
disabled: !this.state.storageIsEncrypted,
}}
/>
)}
{this.state.storageIsEncrypted && (
<TouchableOpacity
disabled={!this.state.storageIsEncrypted}
<BlueListItem
onPress={() => this.props.navigation.navigate('PlausibleDeniability')}
>
<BlueListItem
disabled={!this.state.storageIsEncrypted}
title={loc.settings.plausible_deniability}
testID="PlausibleDeniabilityButton"
/>
</TouchableOpacity>
disabled={!this.state.storageIsEncrypted}
title={loc.settings.plausible_deniability}
chevron
testID="PlausibleDeniabilityButton"
Component={TouchableOpacity}
/>
)}
</ScrollView>
</SafeBlueArea>

21
screen/settings/language.js
View file

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { FlatList, TouchableOpacity } from 'react-native';
import { FlatList } from 'react-native';
import { BlueLoading, BlueText, SafeBlueArea, BlueListItem, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
import PropTypes from 'prop-types';
import { Icon } from 'react-native-elements';
@ -56,22 +56,19 @@ export default class Language extends Component {
renderItem = ({ item }) => {
return (
<TouchableOpacity
<BlueListItem
onPress={() => {
console.log('setLanguage', item.value);
loc.saveLanguage(item.value);
return this.setState({ language: item.value });
}}
>
<BlueListItem
title={item.label}
{...(this.state.language === item.value
? {
rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" />,
}
: { hideChevron: true })}
/>
</TouchableOpacity>
title={item.label}
{...(this.state.language === item.value
? {
rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" />,
}
: { hideChevron: true })}
/>
);
};

3
screen/settings/lightningSettings.js
View file

@ -68,10 +68,11 @@ export default class LightningSettings extends Component {
onPress={() => {
Linking.openURL('https://github.com/BlueWallet/LndHub');
}}
titleStyle={{ color: BlueApp.settings.buttonAlternativeTextColor }}
title="github.com/BlueWallet/LndHub"
color={BlueApp.settings.buttonTextColor}
buttonStyle={{
backgroundColor: '#FFFFFF',
backgroundColor: 'transparent',
}}
/>

26
screen/settings/settings.js
View file

@ -16,14 +16,26 @@ const Settings = () => {
<BlueLoading />
) : (
<SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
<BlueHeaderDefaultSub leftText={loc.settings.header} rightComponent={null} />
<ScrollView>
<BlueListItem title={'General'} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} />
<BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} />
<BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} />
<BlueListItem title="Security" onPress={() => navigate('EncryptStorage')} component={TouchableOpacity} testID="SecurityButton" />
<BlueListItem title="Network" component={TouchableOpacity} onPress={() => navigate('NetworkSettings')} />
<BlueListItem title={loc.settings.about} component={TouchableOpacity} onPress={() => navigate('About')} testID="AboutButton" />
<BlueHeaderDefaultSub leftText={loc.settings.header} rightComponent={null} />
<BlueListItem title={'General'} component={TouchableOpacity} onPress={() => navigate('GeneralSettings')} chevron />
<BlueListItem title={loc.settings.currency} component={TouchableOpacity} onPress={() => navigate('Currency')} chevron />
<BlueListItem title={loc.settings.language} component={TouchableOpacity} onPress={() => navigate('Language')} chevron />
<BlueListItem
title="Security"
onPress={() => navigate('EncryptStorage')}
component={TouchableOpacity}
testID="SecurityButton"
chevron
/>
<BlueListItem title="Network" component={TouchableOpacity} onPress={() => navigate('NetworkSettings')} chevron />
<BlueListItem
title={loc.settings.about}
component={TouchableOpacity}
onPress={() => navigate('About')}
testID="AboutButton"
chevron
/>
</ScrollView>
</SafeBlueArea>
);

52
screen/wallets/add.js
View file

@ -15,6 +15,7 @@ import AsyncStorage from '@react-native-community/async-storage';
import {
BlueTextCentered,
BlueText,
BlueListItem,
LightningButton,
BitcoinButton,
BlueFormLabel,
@ -24,12 +25,12 @@ import {
BlueButtonLink,
BlueSpacing20,
} from '../../BlueComponents';
import { RadioGroup, RadioButton } from 'react-native-flexi-radio-button';
import PropTypes from 'prop-types';
import { HDSegwitP2SHWallet } from '../../class/hd-segwit-p2sh-wallet';
import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet';
import { AppStorage, HDSegwitBech32Wallet, SegwitP2SHWallet } from '../../class';
import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
import { Icon } from 'react-native-elements';
let EV = require('../../events');
let A = require('../../analytics');
let BlueApp: AppStorage = require('../../BlueApp');
@ -46,6 +47,7 @@ export default class WalletsAdd extends Component {
this.state = {
isLoading: true,
walletBaseURI: '',
selectedIndex: 0,
};
}
@ -53,7 +55,6 @@ export default class WalletsAdd extends Component {
let walletBaseURI = await AsyncStorage.getItem(AppStorage.LNDHUB);
let isAdvancedOptionsEnabled = await BlueApp.isAdancedModeEnabled();
walletBaseURI = walletBaseURI || '';
this.setState({
isLoading: false,
activeBitcoin: undefined,
@ -69,10 +70,9 @@ export default class WalletsAdd extends Component {
}); /* also, a hack to make screen update new typed text */
}
onSelect(index, value) {
onSelect(index) {
this.setState({
selectedIndex: index,
selectedValue: value,
});
}
@ -178,17 +178,39 @@ export default class WalletsAdd extends Component {
<View>
<BlueSpacing20 />
<Text style={{ color: '#0c2550', fontWeight: '500' }}>{loc.settings.advanced_options}</Text>
<RadioGroup onSelect={(index, value) => this.onSelect(index, value)} selectedIndex={0}>
<RadioButton value={HDSegwitBech32Wallet.type}>
<BlueText>{HDSegwitBech32Wallet.typeReadable} - Multiple addresses</BlueText>
</RadioButton>
<RadioButton value={SegwitP2SHWallet.type}>
<BlueText>{SegwitP2SHWallet.typeReadable} - Single address</BlueText>
</RadioButton>
<RadioButton value={HDSegwitP2SHWallet.type}>
<BlueText>{HDSegwitP2SHWallet.typeReadable} - Multiple addresses</BlueText>
</RadioButton>
</RadioGroup>
<BlueListItem
onPress={() => {
this.onSelect(0, HDSegwitBech32Wallet.type);
}}
title={HDSegwitBech32Wallet.typeReadable}
{...(this.state.selectedIndex === 0
? {
rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" />,
}
: { hideChevron: true })}
/>
<BlueListItem
onPress={() => {
this.onSelect(1, SegwitP2SHWallet.type);
}}
title={SegwitP2SHWallet.typeReadable}
{...(this.state.selectedIndex === 1
? {
rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" />,
}
: { hideChevron: true })}
/>
<BlueListItem
onPress={() => {
this.onSelect(2, HDSegwitP2SHWallet.typeReadable.type);
}}
title={HDSegwitP2SHWallet.typeReadable}
{...(this.state.selectedIndex === 2
? {
rightIcon: <Icon name="check" type="font-awesome" color="#0c2550" />,
}
: { hideChevron: true })}
/>
</View>
);
} else if (this.state.activeLightning && this.state.isAdvancedOptionsEnabled) {

77
screen/wallets/list.js
View file

@ -1,16 +1,5 @@
import React, { Component } from 'react';
import {
View,
StatusBar,
TouchableOpacity,
Text,
StyleSheet,
FlatList,
InteractionManager,
RefreshControl,
ScrollView,
Alert,
} from 'react-native';
import { View, StatusBar, TouchableOpacity, Text, StyleSheet, InteractionManager, RefreshControl, ScrollView, Alert } from 'react-native';
import { BlueLoading, SafeBlueArea, WalletsCarousel, BlueList, BlueHeaderDefaultMain, BlueTransactionListItem } from '../../BlueComponents';
import { Icon } from 'react-native-elements';
import { NavigationEvents } from 'react-navigation';
@ -420,39 +409,37 @@ export default class WalletsList extends Component {
}}
ref={c => (this.walletsCarousel = c)}
/>
<BlueList>
{this.renderLocalTrader()}
<FlatList
ListHeaderComponent={this.renderListHeaderComponent}
ListEmptyComponent={
<View style={{ top: 80, height: 160 }}>
<Text
style={{
fontSize: 18,
color: '#9aa0aa',
textAlign: 'center',
}}
>
{loc.wallets.list.empty_txs1}
</Text>
<Text
style={{
fontSize: 18,
color: '#9aa0aa',
textAlign: 'center',
fontWeight: '600',
}}
>
{loc.wallets.list.empty_txs2}
</Text>
</View>
}
data={this.state.dataSource}
extraData={this.state.dataSource}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</BlueList>
{this.renderLocalTrader()}
<BlueList
ListHeaderComponent={this.renderListHeaderComponent}
ListEmptyComponent={
<View style={{ top: 80, height: 160 }}>
<Text
style={{
fontSize: 18,
color: '#9aa0aa',
textAlign: 'center',
}}
>
{loc.wallets.list.empty_txs1}
</Text>
<Text
style={{
fontSize: 18,
color: '#9aa0aa',
textAlign: 'center',
fontWeight: '600',
}}
>
{loc.wallets.list.empty_txs2}
</Text>
</View>
}
data={this.state.dataSource}
extraData={this.state.dataSource}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</ScrollView>
</View>
</ViewPager>

33
screen/wallets/pleaseBackup.js
View file

@ -1,7 +1,6 @@
import React, { useEffect, useState, useCallback } from 'react';
import { ActivityIndicator, View, BackHandler, Text, ScrollView } from 'react-native';
import { BlueSpacing20, SafeBlueArea, BlueNavigationStyle, BlueText, BlueButton } from '../../BlueComponents';
import { Badge } from 'react-native-elements';
import Privacy from '../../Privacy';
import { useNavigation, useNavigationParam } from 'react-navigation-hooks';
const loc = require('../../loc');
@ -29,21 +28,23 @@ const PleaseBackup = () => {
let component = [];
for (const [index, secret] of words.entries()) {
component.push(
<View style={{ width: 'auto', marginRight: 8, marginBottom: 8 }} key={`${secret}${index}`}>
<Badge
containerStyle={{
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>
{`${index}`}. {secret}
</Text>
</Badge>
<View
style={{
width: 'auto',
marginRight: 8,
marginBottom: 8,
backgroundColor: '#f5f5f5',
paddingTop: 6,
paddingBottom: 6,
paddingLeft: 8,
paddingRight: 8,
borderRadius: 4,
}}
key={`${secret}${index}`}
>
<Text style={{ color: '#81868E', fontWeight: 'bold' }}>
{`${index}`}. {secret}
</Text>
</View>,
);
}