diff --git a/BlueComponents.js b/BlueComponents.js index 17b235ae6..d9d423e19 100644 --- a/BlueComponents.js +++ b/BlueComponents.js @@ -1,7 +1,7 @@ /* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */ import React, { Component, forwardRef } from 'react'; import PropTypes from 'prop-types'; -import { Icon, Input, Text, Header, ListItem, Avatar } from 'react-native-elements'; +import { Icon, Text, Header, ListItem, Avatar } from 'react-native-elements'; import { ActivityIndicator, Alert, @@ -11,7 +11,6 @@ import { InputAccessoryView, Keyboard, KeyboardAvoidingView, - PixelRatio, Platform, PlatformColor, SafeAreaView, @@ -28,6 +27,7 @@ import NetworkTransactionFees, { NetworkTransactionFee, NetworkTransactionFeeTyp import AsyncStorage from '@react-native-async-storage/async-storage'; import { useTheme } from '@react-navigation/native'; import { BlueCurrentTheme } from './components/themes'; +import PlusIcon from './components/icons/PlusIcon'; import loc, { formatStringAddTwoWhiteSpaces } from './loc'; const { height, width } = Dimensions.get('window'); @@ -389,6 +389,7 @@ export const BlueTextCentered = props => { const { colors } = useTheme(); return ; }; + export const BlueListItem = React.memo(props => { const { colors } = useTheme(); @@ -472,24 +473,6 @@ export const BlueFormLabel = props => { ); }; -export const BlueFormInput = props => { - const { colors } = useTheme(); - return ( - - ); -}; - export const BlueFormMultiInput = props => { const { colors } = useTheme(); @@ -523,19 +506,6 @@ export const BlueFormMultiInput = props => { ); }; -export const BlueHeader = props => { - return ( -
- ); -}; - export const BlueHeaderDefaultSub = props => { const { colors } = useTheme(); @@ -592,7 +562,7 @@ export const BlueHeaderDefaultMain = props => { > {props.leftText} - + ); }; @@ -605,14 +575,6 @@ export const BlueSpacing40 = props => { return ; }; -export const BlueSpacingVariable = props => { - if (isIpad) { - return ; - } else { - return ; - } -}; - export class is { static ipad() { return isIpad; @@ -690,299 +652,6 @@ export const BlueLoading = props => { ); }; -const stylesBlueIcon = StyleSheet.create({ - container: { - flex: 1, - }, - box1: { - position: 'relative', - top: 15, - }, - box: { - alignSelf: 'flex-end', - paddingHorizontal: 14, - paddingTop: 8, - }, - boxIncoming: { - position: 'relative', - }, - ball: { - width: 30, - height: 30, - borderRadius: 15, - }, - ballIncoming: { - width: 30, - height: 30, - borderRadius: 15, - transform: [{ rotate: '-45deg' }], - justifyContent: 'center', - }, - ballIncomingWithoutRotate: { - width: 30, - height: 30, - borderRadius: 15, - }, - ballReceive: { - width: 30, - height: 30, - borderBottomLeftRadius: 15, - transform: [{ rotate: '-45deg' }], - }, - ballOutgoing: { - width: 30, - height: 30, - borderRadius: 15, - transform: [{ rotate: '225deg' }], - justifyContent: 'center', - }, - ballOutgoingWithoutRotate: { - width: 30, - height: 30, - borderRadius: 15, - }, - ballOutgoingExpired: { - width: 30, - height: 30, - borderRadius: 15, - justifyContent: 'center', - }, - ballTransparrent: { - width: 30, - height: 30, - borderRadius: 15, - backgroundColor: 'transparent', - }, - ballDimmed: { - width: 30, - height: 30, - borderRadius: 15, - backgroundColor: 'gray', - }, -}); - -export const BluePlusIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ball: { - backgroundColor: colors.buttonBackgroundColor, - }, - }); - return ( - - ); -}; - -export const BlueTransactionIncomingIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ballIncoming: { - backgroundColor: colors.ballReceive, - }, - }); - return ( - - - - - - - - ); -}; - -export const BlueTransactionPendingIcon = props => { - const { colors } = useTheme(); - - const stylesBlueIconHooks = StyleSheet.create({ - ball: { - backgroundColor: colors.buttonBackgroundColor, - }, - }); - return ( - - - - - - - - ); -}; - -export const BlueTransactionExpiredIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ballOutgoingExpired: { - backgroundColor: colors.ballOutgoingExpired, - }, - }); - return ( - - - - - - - - ); -}; - -export const BlueTransactionOnchainIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ballIncoming: { - backgroundColor: colors.ballReceive, - }, - }); - return ( - - - - - - - - ); -}; - -export const BlueTransactionOffchainIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ballOutgoingWithoutRotate: { - backgroundColor: colors.ballOutgoing, - }, - }); - return ( - - - - - - - - ); -}; - -export const BlueTransactionOffchainIncomingIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ballIncomingWithoutRotate: { - backgroundColor: colors.ballReceive, - }, - }); - return ( - - - - - - - - ); -}; - -export const BlueTransactionOutgoingIcon = props => { - const { colors } = useTheme(); - const stylesBlueIconHooks = StyleSheet.create({ - ballOutgoing: { - backgroundColor: colors.ballOutgoing, - }, - }); - return ( - - - - - - - - ); -}; - -const sendReceiveScanButtonFontSize = - PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26) > 22 - ? 22 - : PixelRatio.roundToNearestPixel(Dimensions.get('window').width / 26); -export const BlueReceiveButtonIcon = props => { - const { colors } = useTheme(); - - return ( - - - - - - - - {formatStringAddTwoWhiteSpaces(loc.receive.header)} - - - - - ); -}; - export class BlueReplaceFeeSuggestions extends Component { static propTypes = { onFeeSelected: PropTypes.func.isRequired, diff --git a/components/TransactionListItem.js b/components/TransactionListItem.js index 72d4172fe..99c3be5fa 100644 --- a/components/TransactionListItem.js +++ b/components/TransactionListItem.js @@ -2,24 +2,23 @@ import React, { useState, useMemo, useCallback, useContext, useEffect, useRef } from 'react'; import { Linking, StyleSheet, View } from 'react-native'; import Clipboard from '@react-native-clipboard/clipboard'; -import { BitcoinUnit } from '../models/bitcoinUnits'; -import * as NavigationService from '../NavigationService'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { useNavigation, useTheme } from '@react-navigation/native'; + +import { BitcoinUnit } from '../models/bitcoinUnits'; +import * as NavigationService from '../NavigationService'; import loc, { formatBalanceWithoutSuffix, transactionTimeToReadable } from '../loc'; import Lnurl from '../class/lnurl'; import { BlueStorageContext } from '../blue_modules/storage-context'; import ToolTipMenu from './TooltipMenu'; -import { - BlueListItem, - BlueTransactionExpiredIcon, - BlueTransactionIncomingIcon, - BlueTransactionOffchainIcon, - BlueTransactionOffchainIncomingIcon, - BlueTransactionOnchainIcon, - BlueTransactionOutgoingIcon, - BlueTransactionPendingIcon, -} from '../BlueComponents'; +import { BlueListItem } from '../BlueComponents'; +import TransactionExpiredIcon from '../components/icons/TransactionExpiredIcon'; +import TransactionIncomingIcon from '../components/icons/TransactionIncomingIcon'; +import TransactionOffchainIcon from '../components/icons/TransactionOffchainIcon'; +import TransactionOffchainIncomingIcon from '../components/icons/TransactionOffchainIncomingIcon'; +import TransactionOnchainIcon from '../components/icons/TransactionOnchainIcon'; +import TransactionOutgoingIcon from '../components/icons/TransactionOutgoingIcon'; +import TransactionPendingIcon from '../components/icons/TransactionPendingIcon'; export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, walletID }) => { const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1); @@ -114,7 +113,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn if (item.category === 'receive' && item.confirmations < 3) { return ( - + ); } @@ -122,7 +121,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn if (item.type && item.type === 'bitcoind_tx') { return ( - + ); } @@ -130,7 +129,7 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn // is it lightning offchain payment? return ( - + ); } @@ -143,14 +142,14 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn if (invoiceExpiration < now) { return ( - + ); } } else { return ( - + ); } @@ -159,19 +158,19 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn if (!item.confirmations) { return ( - + ); } else if (item.value < 0) { return ( - + ); } else { return ( - + ); } diff --git a/components/icons/PlusIcon.js b/components/icons/PlusIcon.js new file mode 100644 index 000000000..122349e5a --- /dev/null +++ b/components/icons/PlusIcon.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { StyleSheet } from 'react-native'; +import { Avatar } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + ball: { + width: 30, + height: 30, + borderRadius: 15, + }, +}); + +const PlusIcon = props => { + const { colors } = useTheme(); + const stylesHook = StyleSheet.create({ + ball: { + backgroundColor: colors.buttonBackgroundColor, + }, + }); + + return ( + + ); +}; + +export default PlusIcon; diff --git a/components/icons/TransactionExpiredIcon.js b/components/icons/TransactionExpiredIcon.js new file mode 100644 index 000000000..37cc9c7f7 --- /dev/null +++ b/components/icons/TransactionExpiredIcon.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ballOutgoingExpired: { + width: 30, + height: 30, + borderRadius: 15, + justifyContent: 'center', + }, + icon: { + left: 0, + top: 0, + }, +}); + +const TransactionExpiredIcon = props => { + const { colors } = useTheme(); + const stylesHooks = StyleSheet.create({ + ballOutgoingExpired: { + backgroundColor: colors.ballOutgoingExpired, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionExpiredIcon; diff --git a/components/icons/TransactionIncomingIcon.js b/components/icons/TransactionIncomingIcon.js new file mode 100644 index 000000000..65aa45eea --- /dev/null +++ b/components/icons/TransactionIncomingIcon.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ballIncoming: { + width: 30, + height: 30, + borderRadius: 15, + transform: [{ rotate: '-45deg' }], + justifyContent: 'center', + }, +}); + +const TransactionIncomingIcon = props => { + const { colors } = useTheme(); + const stylesHooks = StyleSheet.create({ + ballIncoming: { + backgroundColor: colors.ballReceive, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionIncomingIcon; diff --git a/components/icons/TransactionOffchainIcon.js b/components/icons/TransactionOffchainIcon.js new file mode 100644 index 000000000..a1f78e9c8 --- /dev/null +++ b/components/icons/TransactionOffchainIcon.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ballOutgoingWithoutRotate: { + width: 30, + height: 30, + borderRadius: 15, + }, + icon: { + left: 0, + marginTop: 6, + }, +}); + +const TransactionOffchainIcon = props => { + const { colors } = useTheme(); + const stylesHooks = StyleSheet.create({ + ballOutgoingWithoutRotate: { + backgroundColor: colors.ballOutgoing, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionOffchainIcon; diff --git a/components/icons/TransactionOffchainIncomingIcon.js b/components/icons/TransactionOffchainIncomingIcon.js new file mode 100644 index 000000000..d78359fcf --- /dev/null +++ b/components/icons/TransactionOffchainIncomingIcon.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ballIncomingWithoutRotate: { + width: 30, + height: 30, + borderRadius: 15, + }, + icon: { + left: 0, + marginTop: 6, + }, +}); + +const TransactionOffchainIncomingIcon = props => { + const { colors } = useTheme(); + const stylesHooks = StyleSheet.create({ + ballIncomingWithoutRotate: { + backgroundColor: colors.ballReceive, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionOffchainIncomingIcon; diff --git a/components/icons/TransactionOnchainIcon.js b/components/icons/TransactionOnchainIcon.js new file mode 100644 index 000000000..785e425e1 --- /dev/null +++ b/components/icons/TransactionOnchainIcon.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ballIncoming: { + width: 30, + height: 30, + borderRadius: 15, + transform: [{ rotate: '-45deg' }], + justifyContent: 'center', + }, + icon: { + left: 0, + top: 0, + transform: [{ rotate: '-45deg' }], + }, +}); + +const TransactionOnchainIcon = props => { + const { colors } = useTheme(); + const stylesBlueIconHooks = StyleSheet.create({ + ballIncoming: { + backgroundColor: colors.ballReceive, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionOnchainIcon; diff --git a/components/icons/TransactionOutgoingIcon.js b/components/icons/TransactionOutgoingIcon.js new file mode 100644 index 000000000..2ae3c92bd --- /dev/null +++ b/components/icons/TransactionOutgoingIcon.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ballOutgoing: { + width: 30, + height: 30, + borderRadius: 15, + transform: [{ rotate: '225deg' }], + justifyContent: 'center', + }, +}); + +const TransactionOutgoingIcon = props => { + const { colors } = useTheme(); + const stylesBlueIconHooks = StyleSheet.create({ + ballOutgoing: { + backgroundColor: colors.ballOutgoing, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionOutgoingIcon; diff --git a/components/icons/TransactionPendingIcon.js b/components/icons/TransactionPendingIcon.js new file mode 100644 index 000000000..3461e9ef1 --- /dev/null +++ b/components/icons/TransactionPendingIcon.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { StyleSheet, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import { useTheme } from '@react-navigation/native'; + +const styles = StyleSheet.create({ + boxIncoming: { + position: 'relative', + }, + ball: { + width: 30, + height: 30, + borderRadius: 15, + }, + icon: { + left: 0, + top: 7, + }, +}); + +const TransactionPendingIcon = props => { + const { colors } = useTheme(); + const stylesHook = StyleSheet.create({ + ball: { + backgroundColor: colors.buttonBackgroundColor, + }, + }); + + return ( + + + + + + ); +}; + +export default TransactionPendingIcon; diff --git a/screen/transactions/transactionStatus.js b/screen/transactions/transactionStatus.js index 04c4a9a92..340843cbd 100644 --- a/screen/transactions/transactionStatus.js +++ b/screen/transactions/transactionStatus.js @@ -2,27 +2,19 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import { View, ActivityIndicator, Text, TouchableOpacity, StyleSheet, StatusBar, BackHandler } from 'react-native'; import { Icon } from 'react-native-elements'; import { useNavigation, useRoute, useTheme } from '@react-navigation/native'; +import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; -import { - BlueButton, - BlueCard, - BlueLoading, - BlueSpacing10, - BlueSpacing20, - BlueText, - BlueTransactionIncomingIcon, - BlueTransactionOutgoingIcon, - BlueTransactionPendingIcon, - SafeBlueArea, -} from '../../BlueComponents'; +import { BlueButton, BlueCard, BlueLoading, BlueSpacing10, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents'; +import TransactionIncomingIcon from '../components/icons/TransactionIncomingIcon'; +import TransactionOutgoingIcon from '../components/icons/TransactionOutgoingIcon'; +import TransactionPendingIcon from '../components/icons/TransactionPendingIcon'; import navigationStyle from '../../components/navigationStyle'; +import HandoffComponent from '../../components/handoff'; import { HDSegwitBech32Transaction } from '../../class'; import { BitcoinUnit } from '../../models/bitcoinUnits'; -import HandoffComponent from '../../components/handoff'; import loc, { formatBalanceWithoutSuffix } from '../../loc'; import { BlueStorageContext } from '../../blue_modules/storage-context'; import * as BlueElectrum from '../../blue_modules/BlueElectrum'; -import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; const buttonStatus = Object.freeze({ possible: 1, @@ -391,19 +383,19 @@ const TransactionsStatus = () => { if (!tx.confirmations) { return ( - + ); } else if (tx.value < 0) { return ( - + ); } else { return ( - + ); } diff --git a/tests/integration/App.test.js b/tests/integration/App.test.js index a3800a2eb..364a863b1 100644 --- a/tests/integration/App.test.js +++ b/tests/integration/App.test.js @@ -3,7 +3,7 @@ import React from 'react'; import TestRenderer from 'react-test-renderer'; import Settings from '../../screen/settings/settings'; import Selftest from '../../screen/selftest'; -import { BlueHeader } from '../../BlueComponents'; +import { BlueHeaderDefaultSub } from '../../BlueComponents'; import * as BlueElectrum from '../../blue_modules/BlueElectrum'; jest.mock('react-native-qrcode-svg', () => 'Video'); @@ -21,8 +21,8 @@ afterAll(() => { BlueElectrum.forceDisconnect(); }); -it('BlueHeader works', () => { - const rendered = TestRenderer.create().toJSON(); +it('BlueHeaderDefaultSub works', () => { + const rendered = TestRenderer.create().toJSON(); expect(rendered).toBeTruthy(); });