From 261182b65a63bb4034d88b9b9cb960130108d6c2 Mon Sep 17 00:00:00 2001 From: Ivan Vershigora Date: Fri, 28 Jan 2022 14:13:53 +0300 Subject: [PATCH 1/3] REF: BlueComponents Icons --- BlueComponents.js | 339 +----------------- components/TransactionListItem.js | 39 +- components/icons/PlusIcon.js | 32 ++ components/icons/TransactionExpiredIcon.js | 39 ++ components/icons/TransactionIncomingIcon.js | 36 ++ components/icons/TransactionOffchainIcon.js | 38 ++ .../icons/TransactionOffchainIncomingIcon.js | 38 ++ components/icons/TransactionOnchainIcon.js | 41 +++ components/icons/TransactionOutgoingIcon.js | 36 ++ components/icons/TransactionPendingIcon.js | 38 ++ screen/transactions/transactionStatus.js | 26 +- tests/integration/App.test.js | 6 +- 12 files changed, 333 insertions(+), 375 deletions(-) create mode 100644 components/icons/PlusIcon.js create mode 100644 components/icons/TransactionExpiredIcon.js create mode 100644 components/icons/TransactionIncomingIcon.js create mode 100644 components/icons/TransactionOffchainIcon.js create mode 100644 components/icons/TransactionOffchainIncomingIcon.js create mode 100644 components/icons/TransactionOnchainIcon.js create mode 100644 components/icons/TransactionOutgoingIcon.js create mode 100644 components/icons/TransactionPendingIcon.js 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(); }); From c8bd4d342301331c07993afad995143e8eb1a986 Mon Sep 17 00:00:00 2001 From: Ivan Vershigora Date: Fri, 28 Jan 2022 15:16:47 +0300 Subject: [PATCH 2/3] REF: enable eslint react-native/no-unused-styles rule and remove unused styles --- .eslintrc | 2 + App.js | 19 --- UnlockWith.js | 4 - components/AmountInput.js | 2 +- components/LNNodeBar.js | 3 - components/MultipleStepsListItem.js | 52 -------- components/WalletsCarousel.js | 13 +- .../components/DraggableFlatList.tsx | 14 +- screen/lnd/browser.js | 4 +- screen/lnd/ldkInfo.tsx | 126 +----------------- screen/lnd/ldkOpenChannel.tsx | 87 ------------ screen/lnd/lndCreateInvoice.js | 4 - screen/lnd/lndViewInvoice.js | 45 ------- screen/receive/details.js | 6 - screen/send/broadcast.js | 6 - screen/send/create.js | 4 - screen/send/isItMyAddress.js | 23 ---- screen/send/psbtMultisig.js | 12 -- screen/send/psbtMultisigQRCode.js | 4 - screen/settings/electrumSettings.js | 5 - screen/settings/lightningSettings.tsx | 3 - screen/settings/torSettings.js | 10 +- screen/transactions/CPFP.js | 14 -- screen/transactions/details.js | 7 - screen/transactions/transactionStatus.js | 2 +- screen/wallets/add.js | 7 - screen/wallets/addMultisig.js | 31 +---- screen/wallets/addMultisigHelp.js | 10 +- screen/wallets/addMultisigStep2.js | 78 +---------- screen/wallets/details.js | 3 - screen/wallets/drawerList.js | 8 -- screen/wallets/hodlHodl.js | 7 - screen/wallets/hodlHodlMyContracts.js | 1 - screen/wallets/importCustomDerivationPath.js | 3 - screen/wallets/ldkViewLogs.js | 31 ----- screen/wallets/list.js | 54 -------- screen/wallets/provideEntropy.js | 3 - screen/wallets/reorderWallets.js | 7 - screen/wallets/transactions.js | 23 +--- screen/wallets/viewEditMultisigCosigners.js | 86 ------------ 40 files changed, 27 insertions(+), 796 deletions(-) diff --git a/.eslintrc b/.eslintrc index 0816c67c1..8938b949f 100644 --- a/.eslintrc +++ b/.eslintrc @@ -18,6 +18,8 @@ "react/jsx-handler-names": "off", // activated by standard-react config "react/display-name": "off", "react-native/no-inline-styles": "error", + "react-native/no-unused-styles": "error", + "react-native/no-single-element-style-arrays": "error", "prettier/prettier": [ "warn", { diff --git a/App.js b/App.js index e458424ed..3f5d4c518 100644 --- a/App.js +++ b/App.js @@ -386,25 +386,6 @@ const styles = StyleSheet.create({ root: { flex: 1, }, - space: { - marginHorizontal: 8, - }, - modalContent: { - padding: 22, - justifyContent: 'center', - alignItems: 'center', - borderTopLeftRadius: 16, - borderTopRightRadius: 16, - borderColor: 'rgba(0, 0, 0, 0.1)', - minHeight: 200, - height: 200, - }, - modelContentButtonLayout: { - flexDirection: 'row', - margin: 16, - justifyContent: 'space-between', - alignItems: 'flex-end', - }, }); export default App; diff --git a/UnlockWith.js b/UnlockWith.js index 54a558bd0..4780af9d9 100644 --- a/UnlockWith.js +++ b/UnlockWith.js @@ -31,10 +31,6 @@ const styles = StyleSheet.create({ width: 64, height: 64, }, - encrypted: { - width: 0.5, - height: 20, - }, }); const UnlockWith = () => { diff --git a/components/AmountInput.js b/components/AmountInput.js index aa27e7311..500862e75 100644 --- a/components/AmountInput.js +++ b/components/AmountInput.js @@ -338,7 +338,7 @@ const styles = StyleSheet.create({ disabledButton: { opacity: 0.5, }, - enabledButton: { + enabledButon: { opacity: 1, }, outdatedRateContainer: { diff --git a/components/LNNodeBar.js b/components/LNNodeBar.js index 25870d965..9fb7b97a8 100644 --- a/components/LNNodeBar.js +++ b/components/LNNodeBar.js @@ -61,9 +61,6 @@ const styles = StyleSheet.create({ nodeAlias: { marginVertical: 16, }, - pending: { - marginVertical: 8, - }, canSendBar: { height: 14, maxHeight: 14, diff --git a/components/MultipleStepsListItem.js b/components/MultipleStepsListItem.js index bcb7b25d6..49b6f8456 100644 --- a/components/MultipleStepsListItem.js +++ b/components/MultipleStepsListItem.js @@ -16,37 +16,9 @@ const MultipleStepsListItem = props => { checked = false, } = props; const stylesHook = StyleSheet.create({ - root: { - flex: 1, - backgroundColor: colors.elevated, - }, - textBtc: { - color: colors.buttonAlternativeTextColor, - }, - textDestinationFirstFour: { - color: colors.buttonAlternativeTextColor, - }, - textBtcUnitValue: { - color: colors.buttonAlternativeTextColor, - }, - textDestination: { - color: colors.foregroundColor, - }, - modalContentShort: { - backgroundColor: colors.elevated, - }, - modalContent: { - backgroundColor: colors.elevated, - }, - textFiat: { - color: colors.alternativeTextColor, - }, provideKeyButton: { backgroundColor: colors.buttonDisabledBackgroundColor, }, - exportButton: { - backgroundColor: colors.buttonDisabledBackgroundColor, - }, provideKeyButtonText: { color: colors.buttonTextColor, }, @@ -56,15 +28,9 @@ const MultipleStepsListItem = props => { vaultKeyText: { color: colors.alternativeTextColor, }, - feeFiatText: { - color: colors.alternativeTextColor, - }, vaultKeyCircleSuccess: { backgroundColor: colors.msSuccessBG, }, - vaultKeyTextSigned: { - color: colors.msSuccessBG, - }, rowPartialLeftText: { color: colors.alternativeTextColor, }, @@ -258,15 +224,6 @@ const styles = StyleSheet.create({ alignContent: 'center', justifyContent: 'center', }, - grayButton: { - marginTop: 24, - marginLeft: 40, - height: 48, - borderRadius: 8, - justifyContent: 'center', - paddingHorizontal: 16, - marginBottom: 8, - }, activityIndicator: { marginLeft: 40, }, @@ -281,15 +238,6 @@ const styles = StyleSheet.create({ rowPartialLeftText: { textAlign: 'center', }, - vaultKeyTextSignedWrapper: { justifyContent: 'center', alignItems: 'center', paddingLeft: 16 }, - vaultKeyTextSigned: { fontSize: 18, fontWeight: 'bold' }, - exportButton: { - height: 48, - borderRadius: 8, - flex: 1, - justifyContent: 'center', - paddingHorizontal: 16, - }, }); export default MultipleStepsListItem; diff --git a/components/WalletsCarousel.js b/components/WalletsCarousel.js index 603cd4da9..13eeb7649 100644 --- a/components/WalletsCarousel.js +++ b/components/WalletsCarousel.js @@ -24,7 +24,6 @@ import { BlueStorageContext } from '../blue_modules/storage-context'; import { isHandset, isTablet, isDesktop } from '../blue_modules/environment'; const nStyles = StyleSheet.create({ - root: {}, container: { borderRadius: 10, minHeight: Platform.OS === 'ios' ? 164 : 181, @@ -118,9 +117,6 @@ const iStyles = StyleSheet.create({ fontSize: 19, writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr', }, - activity: { - marginTop: 40, - }, balance: { backgroundColor: 'transparent', fontWeight: 'bold', @@ -258,17 +254,16 @@ WalletCarouselItem.propTypes = { }; const cStyles = StyleSheet.create({ - loading: { - position: 'absolute', - alignItems: 'center', - }, content: { paddingTop: 16, }, contentLargeScreen: { paddingHorizontal: 16, }, - separatorStyle: { width: 16, height: 20 }, + separatorStyle: { + width: 16, + height: 20, + }, }); const WalletsCarousel = forwardRef((props, ref) => { diff --git a/components/react-native-draggable-flatlist/components/DraggableFlatList.tsx b/components/react-native-draggable-flatlist/components/DraggableFlatList.tsx index ee664d8c3..86d639761 100644 --- a/components/react-native-draggable-flatlist/components/DraggableFlatList.tsx +++ b/components/react-native-draggable-flatlist/components/DraggableFlatList.tsx @@ -31,19 +31,11 @@ type RNGHFlatListProps = Animated.AnimateProps< } >; -const AnimatedFlatList = (Animated.createAnimatedComponent(FlatList) as unknown) as (props: RNGHFlatListProps) => React.ReactElement; +const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as unknown as (props: RNGHFlatListProps) => React.ReactElement; function DraggableFlatListInner(props: DraggableFlatListProps) { - const { - cellDataRef, - containerRef, - flatListRef, - isTouchActiveRef, - keyToIndexRef, - panGestureHandlerRef, - propsRef, - scrollOffsetRef, - } = useRefs(); + const { cellDataRef, containerRef, flatListRef, isTouchActiveRef, keyToIndexRef, panGestureHandlerRef, propsRef, scrollOffsetRef } = + useRefs(); const { activationDistance, activeCellOffset, diff --git a/screen/lnd/browser.js b/screen/lnd/browser.js index 793fbabb7..9440717df 100644 --- a/screen/lnd/browser.js +++ b/screen/lnd/browser.js @@ -229,9 +229,6 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', minHeight: 44, }, - safeBack: { - marginHorizontal: 8, - }, safeURL: { flex: 1, marginHorizontal: 8, @@ -281,6 +278,7 @@ const styles = StyleSheet.create({ colorRed: { color: 'red', }, + // eslint-disable-next-line react-native/no-unused-styles colorGray: { color: 'gray', }, diff --git a/screen/lnd/ldkInfo.tsx b/screen/lnd/ldkInfo.tsx index 8dbc8023a..3b63445ca 100644 --- a/screen/lnd/ldkInfo.tsx +++ b/screen/lnd/ldkInfo.tsx @@ -47,14 +47,10 @@ const LdkInfo = () => { // Modals const [selectedChannelIndex, setSelectedChannelIndex] = useState(); - // const stylesHook = StyleSheet.create({ root: { backgroundColor: colors.background, }, - valueText: { - color: colors.alternativeTextColor2, - }, listHeaderText: { color: colors.foregroundColor, backgroundColor: colors.background, @@ -62,27 +58,9 @@ const LdkInfo = () => { listHeaderBack: { backgroundColor: colors.background, }, - valueRoot: { - backgroundColor: colors.background, - }, - textHeader: { - color: colors.outputValue, - }, - valueSats: { - color: colors.alternativeTextColor2, - }, - paidMark: { - backgroundColor: colors.success, - }, detailsText: { color: colors.alternativeTextColor, }, - expired: { - backgroundColor: colors.success, - }, - additionalInfo: { - backgroundColor: colors.brandingColor, - }, modalContent: { backgroundColor: colors.elevated, }, @@ -257,10 +235,10 @@ const LdkInfo = () => { return ( - {loc.lnd.node_alias} + {loc.lnd.node_alias} {channelData && ( - + {LightningLdkWallet.pubkeyToAlias(channelData.remote_node_id) + ' (' + channelData.remote_node_id.substr(0, 10) + @@ -279,7 +257,7 @@ const LdkInfo = () => { itemPriceUnit={wallet.getPreferredBalanceUnit()} /> - + {status === LdkNodeInfoChannelStatus.PENDING ? loc.transactions.pending : channelData?.is_usable @@ -428,11 +406,11 @@ const LdkInfo = () => { ) : null} {maturingBalance ? ( - + Balance awaiting confirmations: {formatBalance(Number(maturingBalance), wallet.getPreferredBalanceUnit(), true)} ) : null} - {maturingEta ? ETA: {maturingEta} : null} + {maturingEta ? ETA: {maturingEta} : null}