REF: enable eslint react-native/no-unused-styles rule and remove unused styles

.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",
       {

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;

UnlockWith.js

@@ -31,10 +31,6 @@ const styles = StyleSheet.create({
     width: 64,
     height: 64,
   },
-  encrypted: {
-    width: 0.5,
-    height: 20,
-  },
 });
 
 const UnlockWith = () => {

components/AmountInput.js

@@ -338,7 +338,7 @@ const styles = StyleSheet.create({
   disabledButton: {
     opacity: 0.5,
   },
-  enabledButton: {
+  enabledButon: {
     opacity: 1,
   },
   outdatedRateContainer: {

components/LNNodeBar.js

@@ -61,9 +61,6 @@ const styles = StyleSheet.create({
   nodeAlias: {
     marginVertical: 16,
   },
-  pending: {
-    marginVertical: 8,
-  },
   canSendBar: {
     height: 14,
     maxHeight: 14,

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;

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) => {

components/react-native-draggable-flatlist/components/DraggableFlatList.tsx

@@ -31,19 +31,11 @@ type RNGHFlatListProps<T> = Animated.AnimateProps<
   }
 >;
 
-const AnimatedFlatList = (Animated.createAnimatedComponent(FlatList) as unknown) as <T>(props: RNGHFlatListProps<T>) => React.ReactElement;
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as unknown as <T>(props: RNGHFlatListProps<T>) => React.ReactElement;
 
 function DraggableFlatListInner<T>(props: DraggableFlatListProps<T>) {
-  const {
+  const { cellDataRef, containerRef, flatListRef, isTouchActiveRef, keyToIndexRef, panGestureHandlerRef, propsRef, scrollOffsetRef } =
-    cellDataRef,
+    useRefs<T>();
-    containerRef,
-    flatListRef,
-    isTouchActiveRef,
-    keyToIndexRef,
-    panGestureHandlerRef,
-    propsRef,
-    scrollOffsetRef,
-  } = useRefs<T>();
   const {
     activationDistance,
     activeCellOffset,

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',
   },

screen/lnd/ldkInfo.tsx

@@ -47,14 +47,10 @@ const LdkInfo = () => {
   // Modals
   const [selectedChannelIndex, setSelectedChannelIndex] = useState<any>();
 
-  //
   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 (
       <BottomModal isVisible={selectedChannelIndex !== undefined} onClose={closeModal} avoidKeyboard>
         <View style={[styles.modalContent, stylesHook.modalContent]}>
-          <Text style={[stylesHook.detailsText]}>{loc.lnd.node_alias}</Text>
+          <Text style={stylesHook.detailsText}>{loc.lnd.node_alias}</Text>
           <BlueSpacing10 />
           {channelData && (
-            <Text style={[stylesHook.detailsText]}>
+            <Text style={stylesHook.detailsText}>
               {LightningLdkWallet.pubkeyToAlias(channelData.remote_node_id) +
                 ' (' +
                 channelData.remote_node_id.substr(0, 10) +
@@ -279,7 +257,7 @@ const LdkInfo = () => {
             itemPriceUnit={wallet.getPreferredBalanceUnit()}
           />
 
-          <Text style={[stylesHook.detailsText]}>
+          <Text style={stylesHook.detailsText}>
             {status === LdkNodeInfoChannelStatus.PENDING
               ? loc.transactions.pending
               : channelData?.is_usable
@@ -428,11 +406,11 @@ const LdkInfo = () => {
           </>
         ) : null}
         {maturingBalance ? (
-          <Text style={[stylesHook.detailsText]}>
+          <Text style={stylesHook.detailsText}>
             Balance awaiting confirmations: {formatBalance(Number(maturingBalance), wallet.getPreferredBalanceUnit(), true)}
           </Text>
         ) : null}
-        {maturingEta ? <Text style={[stylesHook.detailsText]}>ETA: {maturingEta}</Text> : null}
+        {maturingEta ? <Text style={stylesHook.detailsText}>ETA: {maturingEta}</Text> : null}
         <Button text={loc.lnd.new_channel} onPress={navigateToOpenPrivateChannel} disabled={isLoading} />
         <BlueSpacing20 />
       </View>
@@ -445,79 +423,12 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'space-between',
   },
-  height100: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   marginHorizontal16: {
     marginHorizontal: 16,
   },
   contentContainerStyle: {
     marginHorizontal: 16,
   },
-  justifyContentCenter: {
-    justifyContent: 'center',
-  },
-  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
-  valueAmount: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 8,
-  },
-  valueText: {
-    fontSize: 32,
-    fontWeight: '600',
-  },
-  valueSats: {
-    fontSize: 16,
-    marginHorizontal: 4,
-    paddingBottom: 3,
-    fontWeight: '600',
-    alignSelf: 'flex-end',
-  },
-  memo: {
-    color: '#9aa0aa',
-    fontSize: 14,
-    marginHorizontal: 4,
-    paddingBottom: 6,
-    fontWeight: '400',
-    alignSelf: 'center',
-  },
-  paid: {
-    flex: 3,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  paidMark: {
-    marginTop: -100,
-    marginBottom: 16,
-  },
-  detailsRoot: {
-    justifyContent: 'flex-end',
-    marginBottom: 24,
-    alignItems: 'center',
-  },
-  detailsTouch: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  detailsText: {
-    fontSize: 14,
-    marginRight: 8,
-  },
-  expired: {
-    width: 120,
-    height: 120,
-    borderRadius: 60,
-    alignSelf: 'center',
-    justifyContent: 'center',
-    marginBottom: 30,
-  },
-  activeRoot: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
   listHeaderText: {
     marginTop: 8,
     marginBottom: 8,
@@ -529,14 +440,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  activeQrcode: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 16,
-    borderWidth: 6,
-    borderRadius: 8,
-    borderColor: '#FFFFFF',
-  },
   modalContent: {
     minHeight: 418,
     borderTopLeftRadius: 16,
@@ -544,29 +447,10 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(0, 0, 0, 0.1)',
     padding: 24,
   },
-  newChannelModalContent: {
-    padding: 24,
-    minHeight: 350,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-  },
-  fundingNewChannelModalContent: {
-    padding: 24,
-    paddingTop: 24,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    height: 400,
-  },
   separator: {
     height: 1,
     marginTop: 16,
   },
-  textHeader: {
-    fontSize: 18,
-    fontWeight: 'bold',
-  },
 });
 
 LdkInfo.navigationOptions = navigationStyle(

screen/lnd/ldkOpenChannel.tsx

@@ -55,27 +55,6 @@ const LdkOpenChannel = (props: any) => {
     root: {
       backgroundColor: colors.elevated,
     },
-    valueText: {
-      color: colors.alternativeTextColor2,
-    },
-    valueRoot: {
-      backgroundColor: colors.background,
-    },
-    valueSats: {
-      color: colors.alternativeTextColor2,
-    },
-    paidMark: {
-      backgroundColor: colors.success,
-    },
-    detailsText: {
-      color: colors.alternativeTextColor,
-    },
-    expired: {
-      backgroundColor: colors.success,
-    },
-    additionalInfo: {
-      backgroundColor: colors.brandingColor,
-    },
   });
 
   /**
@@ -307,85 +286,19 @@ const styles = StyleSheet.create({
   root: {
     flex: 1,
   },
-  contentContainerStyle: {
-    flexGrow: 1,
-  },
   justifyContentCenter: {
     justifyContent: 'center',
   },
-  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
-  valueAmount: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 8,
-  },
   horizontalButtons: {
     flexDirection: 'row',
     justifyContent: 'center',
   },
-  valueText: {
-    fontSize: 32,
-    fontWeight: '600',
-  },
-  valueSats: {
-    fontSize: 16,
-    marginHorizontal: 4,
-    paddingBottom: 3,
-    fontWeight: '600',
-    alignSelf: 'flex-end',
-  },
-  memo: {
-    color: '#9aa0aa',
-    fontSize: 14,
-    marginHorizontal: 4,
-    paddingBottom: 6,
-    fontWeight: '400',
-    alignSelf: 'center',
-  },
-  paid: {
-    flex: 3,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  paidMark: {
-    marginTop: -100,
-    marginBottom: 16,
-  },
-  detailsRoot: {
-    justifyContent: 'flex-end',
-    marginBottom: 24,
-    alignItems: 'center',
-  },
-  detailsTouch: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  detailsText: {
-    fontSize: 14,
-    marginRight: 8,
-  },
-  expired: {
-    width: 120,
-    height: 120,
-    borderRadius: 60,
-    alignSelf: 'center',
-    justifyContent: 'center',
-    marginBottom: 30,
-  },
   activeRoot: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'space-between',
     padding: 16,
   },
-  activeQrcode: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: 16,
-    borderWidth: 6,
-    borderRadius: 8,
-    borderColor: '#FFFFFF',
-  },
 });
 
 LdkOpenChannel.navigationOptions = navigationStyle(

screen/lnd/lndCreateInvoice.js

@@ -484,10 +484,6 @@ const styles = StyleSheet.create({
     textAlignVertical: 'bottom',
     marginTop: 2,
   },
-  error: {
-    flex: 1,
-    paddingTop: 20,
-  },
   root: {
     flex: 1,
     justifyContent: 'space-between',

screen/lnd/lndViewInvoice.js

@@ -35,18 +35,6 @@ const LNDViewInvoice = () => {
     root: {
       backgroundColor: colors.background,
     },
-    valueText: {
-      color: colors.alternativeTextColor2,
-    },
-    valueRoot: {
-      backgroundColor: colors.background,
-    },
-    valueSats: {
-      color: colors.alternativeTextColor2,
-    },
-    paidMark: {
-      backgroundColor: colors.success,
-    },
     detailsText: {
       color: colors.alternativeTextColor,
     },
@@ -306,39 +294,6 @@ const styles = StyleSheet.create({
   justifyContentCenter: {
     justifyContent: 'center',
   },
-  valueAmount: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingBottom: 8,
-  },
-  valueText: {
-    fontSize: 32,
-    fontWeight: '600',
-  },
-  valueSats: {
-    fontSize: 16,
-    marginHorizontal: 4,
-    paddingBottom: 3,
-    fontWeight: '600',
-    alignSelf: 'flex-end',
-  },
-  memo: {
-    color: '#9aa0aa',
-    fontSize: 14,
-    marginHorizontal: 4,
-    paddingBottom: 6,
-    fontWeight: '400',
-    alignSelf: 'center',
-  },
-  paid: {
-    flex: 3,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  paidMark: {
-    marginTop: -100,
-    marginBottom: 16,
-  },
   detailsRoot: {
     justifyContent: 'flex-end',
     marginBottom: 24,

screen/receive/details.js

@@ -131,12 +131,6 @@ const ReceiveDetails = () => {
       textAlign: 'center',
       paddingBottom: 24,
     },
-    loading: {
-      alignItems: 'center',
-      width: 300,
-      height: 300,
-      backgroundColor: colors.elevated,
-    },
     modalButton: {
       backgroundColor: colors.modalButton,
       paddingVertical: 14,

screen/send/broadcast.js

@@ -40,12 +40,6 @@ const Broadcast = () => {
   const [broadcastResult, setBroadcastResult] = useState(BROADCAST_RESULT.none);
 
   const stylesHooks = StyleSheet.create({
-    blueArea: {
-      backgroundColor: colors.background,
-    },
-    text: {
-      color: colors.foregroundColor,
-    },
     input: {
       borderColor: colors.formBorder,
       borderBottomColor: colors.formBorder,

screen/send/create.js

@@ -218,10 +218,6 @@ const styles = StyleSheet.create({
     height: 0.5,
     marginVertical: 16,
   },
-  card: {
-    alignItems: 'center',
-    flex: 1,
-  },
   cardText: {
     fontWeight: '500',
   },

screen/send/isItMyAddress.js

@@ -22,9 +22,6 @@ const IsItMyAddress = () => {
   const [resultCleanAddress, setResultCleanAddress] = useState();
 
   const stylesHooks = StyleSheet.create({
-    text: {
-      color: colors.foregroundColor,
-    },
     input: {
       borderColor: colors.formBorder,
       borderBottomColor: colors.formBorder,
@@ -152,14 +149,6 @@ const styles = StyleSheet.create({
   blueArea: {
     paddingTop: 19,
   },
-  broadcastResultWrapper: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    height: '100%',
-    width: '100%',
-  },
   mainCard: {
     padding: 0,
     display: 'flex',
@@ -167,18 +156,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'flex-start',
   },
-  topFormRow: {
-    flex: 0.1,
-    flexBasis: 0.1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingBottom: 10,
-    paddingTop: 0,
-    paddingRight: 100,
-    height: 30,
-    maxHeight: 30,
-  },
   input: {
     flexDirection: 'row',
     borderWidth: 1,

screen/send/psbtMultisig.js

@@ -37,15 +37,9 @@ const PsbtMultisig = () => {
     textBtc: {
       color: colors.buttonAlternativeTextColor,
     },
-    textDestinationFirstFour: {
-      color: colors.buttonAlternativeTextColor,
-    },
     textBtcUnitValue: {
       color: colors.buttonAlternativeTextColor,
     },
-    textDestination: {
-      color: colors.foregroundColor,
-    },
     textFiat: {
       color: colors.alternativeTextColor,
     },
@@ -330,10 +324,6 @@ const styles = StyleSheet.create({
     flex: 90,
     marginLeft: '-11%',
   },
-  scrollViewContent: {
-    flexGrow: 1,
-    justifyContent: 'space-between',
-  },
   container: {
     flexDirection: 'column',
     paddingTop: 24,
@@ -399,8 +389,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   itemUnsignedWrapper: { flexDirection: 'row', paddingTop: 16 },
-  textDestinationSpacingRight: { marginRight: 4 },
-  textDestinationSpacingLeft: { marginLeft: 4 },
   vaultKeyTextSigned: { fontSize: 18, fontWeight: 'bold' },
   vaultKeyTextSignedWrapper: { justifyContent: 'center', alignItems: 'center', paddingLeft: 16 },
   flexDirectionRow: { flexDirection: 'row', paddingVertical: 12 },

screen/send/psbtMultisigQRCode.js

@@ -125,10 +125,6 @@ const styles = StyleSheet.create({
     marginLeft: 20,
     marginRight: 20,
   },
-  copyToClipboard: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   exportButton: {
     height: 48,
     borderRadius: 8,

screen/settings/electrumSettings.js

@@ -512,11 +512,6 @@ const styles = StyleSheet.create({
     marginBottom: -24,
     flexShrink: 1,
   },
-  flexShrink: {
-    flexShrink: 1,
-    marginRight: 8,
-    alignItems: 'flex-start',
-  },
   inputWrap: {
     flex: 1,
     flexDirection: 'row',

screen/settings/lightningSettings.tsx

@@ -35,9 +35,6 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     flexDirection: I18nManager.isRTL ? 'row-reverse' : 'row',
   },
-  torSupported: {
-    color: '#81868e',
-  },
 });
 
 type LightingSettingsRouteProps = RouteProp<

screen/settings/torSettings.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View } from 'react-native';
 
 import navigationStyle from '../../components/navigationStyle';
 import { BlueButton, BlueCard, BlueListItem, BlueLoading, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
@@ -9,12 +9,6 @@ import alert from '../../components/Alert';
 
 const torrific = require('../../blue_modules/torrific');
 
-const styles = StyleSheet.create({
-  torSupported: {
-    color: '#81868e',
-  },
-});
-
 /*
   TorSettings is not displayed in Settings menu if isTorCapable is false. No need to provide code protection.
 */
@@ -77,7 +71,7 @@ const TorSettings = () => {
 
   if (isLoading) {
     return (
-      <View style={[styles.root]}>
+      <View>
         <BlueLoading />
       </View>
     );

screen/transactions/CPFP.js

@@ -62,20 +62,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     alignSelf: 'center',
   },
-  doneWrap: {
-    flex: 1,
-    paddingTop: 19,
-  },
-  doneCard: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    paddingTop: 76,
-    paddingBottom: 16,
-  },
-  blueBigCheckmark: {
-    marginTop: 43,
-    marginBottom: 53,
-  },
 });
 
 export default class CPFP extends Component {

screen/transactions/details.js

@@ -36,9 +36,6 @@ const TransactionsDetails = () => {
   const [memo, setMemo] = useState();
   const { colors } = useTheme();
   const stylesHooks = StyleSheet.create({
-    txLink: {
-      color: colors.alternativeTextColor2,
-    },
     saveText: {
       color: colors.alternativeTextColor2,
     },
@@ -278,10 +275,6 @@ const styles = StyleSheet.create({
     fontSize: 16,
     fontWeight: '500',
   },
-  txHash: {
-    marginBottom: 8,
-    color: 'grey',
-  },
   Link: {
     fontWeight: '600',
     fontSize: 15,

screen/transactions/transactionStatus.js

@@ -420,7 +420,7 @@ const TransactionsStatus = () => {
             </Text>
           </View>
           {eta ? (
-            <View style={[styles.eta]}>
+            <View style={styles.eta}>
               <BlueSpacing10 />
               <Text style={styles.confirmationsText}>{eta}</Text>
             </View>

screen/wallets/add.js

@@ -401,10 +401,6 @@ const styles = StyleSheet.create({
   createButton: {
     flex: 1,
   },
-  loading: {
-    flex: 1,
-    paddingTop: 20,
-  },
   label: {
     flexDirection: 'row',
     borderWidth: 1,
@@ -455,9 +451,6 @@ const styles = StyleSheet.create({
   noPadding: {
     paddingHorizontal: 0,
   },
-  typeMargin: {
-    marginTop: 8,
-  },
 });
 
 export default WalletsAdd;

screen/wallets/addMultisig.js

@@ -33,10 +33,6 @@ const WalletsAddMultisig = () => {
     textdesc: {
       color: colors.alternativeTextColor,
     },
-    whiteBackground: { backgroundColor: colors.background },
-    itemNameWrapper: { backgroundColor: colors.elevated },
-    nativeName: { color: colors.foregroundColor },
-    filteTextWrapper: { color: colors.foregroundColor, right: 0, position: 'absolute' },
     modalContentShort: {
       backgroundColor: colors.elevated,
     },
@@ -211,7 +207,7 @@ const WalletsAddMultisig = () => {
         </Text>
       </View>
       {isAdvancedModeEnabledRender && (
-        <View style={styles.advancedOptionsContainer}>
+        <View>
           <BlueListItem
             onPress={showAdvancedOptionsModal}
             title={loc.multisig.vault_advanced_customize}
@@ -229,13 +225,6 @@ const WalletsAddMultisig = () => {
 };
 
 const styles = StyleSheet.create({
-  modalFlatList: { width: '100%' },
-  itemNameWrapper: { flexDirection: 'row', paddingTop: 20, paddingBottom: 0 },
-  textWrapper: { paddingLeft: 10, flex: 1, flexDirection: 'row' },
-  nativeName: { fontSize: 16 },
-  filteTextWrapper: { right: 0, position: 'absolute' },
-  filterText: { fontSize: 16, color: 'gray' },
-  advancedOptionsContainer: {},
   item: {
     paddingHorizontal: 0,
   },
@@ -253,30 +242,12 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(0, 0, 0, 0.1)',
     minHeight: 350,
   },
-  formatSelectorTextWrapper: {
-    borderRadius: 6,
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    borderColor: 0,
-  },
   borderRadius6: {
     borderRadius: 6,
   },
-  formatSelectorTextWrapperSelected: {
-    backgroundColor: '#EEF0F4',
-    borderRadius: 6,
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    borderColor: 0,
-  },
   buttonContainer: {
     padding: 24,
   },
-  formatSelectorText: {
-    color: '#13244D',
-    fontSize: 16,
-    fontWeight: '500',
-  },
   column: {
     paddingRight: 20,
     paddingLeft: 20,

screen/wallets/addMultisigHelp.js

@@ -44,7 +44,7 @@ const WalletsAddMultisigHelp = () => {
         <View style={[styles.intro, stylesHook.intro]}>
           <Text style={[styles.introTitle, stylesHook.introTitle]}>{loc.multisig.ms_help_title}</Text>
           <Text style={[styles.introText, stylesHook.introText]}>{loc.multisig.ms_help_text}</Text>
-          <Image style={[styles.introImage]} source={require('../../img/mshelp/mshelp-intro.png')} />
+          <Image style={styles.introImage} source={require('../../img/mshelp/mshelp-intro.png')} />
         </View>
         <View style={[styles.tip, stylesHook.tip]}>
           <Text style={[styles.introTip, stylesHook.introTip]} />
@@ -54,22 +54,22 @@ const WalletsAddMultisigHelp = () => {
           <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_1}</Text>
         </View>
         <View style={[styles.tips, stylesHook.tips]}>
-          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip2.png')} />
+          <Image style={styles.imageTip} source={require('../../img/mshelp/tip2.png')} />
           <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title2}</Text>
           <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_2}</Text>
         </View>
         <View style={[styles.tips, stylesHook.tips]}>
-          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip3.png')} />
+          <Image style={styles.imageTip} source={require('../../img/mshelp/tip3.png')} />
           <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title3}</Text>
           <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_3}</Text>
         </View>
         <View style={[styles.tips, stylesHook.tips]}>
-          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip4.png')} />
+          <Image style={styles.imageTip} source={require('../../img/mshelp/tip4.png')} />
           <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title4}</Text>
           <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_4}</Text>
         </View>
         <View style={[styles.tips, stylesHook.tips]}>
-          <Image style={[styles.imageTip]} source={require('../../img/mshelp/tip5.png')} />
+          <Image style={styles.imageTip} source={require('../../img/mshelp/tip5.png')} />
           <Text style={[styles.tipsTitle, stylesHook.tipsTitle]}>{loc.multisig.ms_help_title5}</Text>
           <Text style={[styles.tipsText, stylesHook.tipsText]}>{loc.multisig.ms_help_5}</Text>
         </View>

screen/wallets/addMultisigStep2.js

@@ -75,60 +75,27 @@ const WalletsAddMultisigStep2 = () => {
     root: {
       backgroundColor: colors.elevated,
     },
-    textBtc: {
-      color: colors.buttonAlternativeTextColor,
-    },
-    textDestinationFirstFour: {
-      color: colors.buttonAlternativeTextColor,
-    },
-    textBtcUnitValue: {
-      color: colors.buttonAlternativeTextColor,
-    },
     textDestination: {
       color: colors.foregroundColor,
     },
-    modalContentShort: {
-      backgroundColor: colors.modal,
-    },
     modalContent: {
       backgroundColor: colors.modal,
     },
-    textFiat: {
-      color: colors.alternativeTextColor,
-    },
-    provideKeyButton: {
-      backgroundColor: colors.buttonDisabledBackgroundColor,
-    },
     exportButton: {
       backgroundColor: colors.buttonDisabledBackgroundColor,
     },
-    provideKeyButtonText: {
-      color: colors.buttonTextColor,
-    },
-    vaultKeyCircle: {
-      backgroundColor: colors.buttonDisabledBackgroundColor,
-    },
     vaultKeyText: {
       color: colors.alternativeTextColor,
     },
-    feeFiatText: {
-      color: colors.alternativeTextColor,
-    },
     vaultKeyCircleSuccess: {
       backgroundColor: colors.msSuccessBG,
     },
-    vaultKeyTextSigned: {
-      color: colors.msSuccessBG,
-    },
     word: {
       backgroundColor: colors.inputBackgroundColor,
     },
     wordText: {
       color: colors.labelText,
     },
-    headerText: {
-      color: colors.foregroundColor,
-    },
     helpButton: {
       backgroundColor: colors.buttonDisabledBackgroundColor,
     },
@@ -637,7 +604,7 @@ const WalletsAddMultisigStep2 = () => {
   return (
     <View style={[styles.root, stylesHook.root]}>
       {renderHelp()}
-      <View style={[styles.wrapBox]}>
+      <View style={styles.wrapBox}>
         <FlatList data={data.current} renderItem={_renderKeyItem} keyExtractor={(_item, index) => `${index}`} />
       </View>
       {renderMnemonicsModal()}
@@ -655,11 +622,6 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 20,
   },
-  mainBlock: {
-    height: '100%',
-    marginHorizontal: 20,
-    marginVertical: 24,
-  },
   wrapBox: {
     flex: 1,
     marginVertical: 24,
@@ -670,42 +632,9 @@ const styles = StyleSheet.create({
     marginBottom: 40,
     justifyContent: 'flex-end',
   },
-
   itemKeyUnprovidedWrapper: { flexDirection: 'row' },
-  vaultKeyCircle: {
-    width: 42,
-    height: 42,
-    borderRadius: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   vaultKeyText: { fontSize: 18, fontWeight: 'bold' },
   vaultKeyTextWrapper: { justifyContent: 'center', alignItems: 'center', paddingLeft: 16 },
-  provideKeyButton: {
-    marginTop: 4,
-    marginLeft: 40,
-    height: 48,
-    borderRadius: 8,
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    marginBottom: 8,
-  },
-  grayButton: {
-    marginTop: 24,
-    marginLeft: 40,
-    height: 48,
-    borderRadius: 8,
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    marginBottom: 8,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    marginVertical: 24,
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-  },
-  provideKeyButtonText: { fontWeight: '600', fontSize: 15 },
   textDestination: { fontWeight: '600' },
   modalContent: {
     paddingHorizontal: 22,
@@ -750,8 +679,6 @@ const styles = StyleSheet.create({
   wordText: {
     fontWeight: 'bold',
   },
-  vaultKeyTextSignedWrapper: { justifyContent: 'center', alignItems: 'center', paddingLeft: 16 },
-  vaultKeyTextSigned: { fontSize: 18, fontWeight: 'bold' },
   exportButton: {
     height: 48,
     borderRadius: 8,
@@ -760,11 +687,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
   headerText: { fontSize: 15, color: '#13244D' },
-  header2Text: { color: '#9AA0AA', fontSize: 14, paddingBottom: 20 },
   alignItemsCenter: { alignItems: 'center' },
   squareButtonWrapper: { height: 50, width: 250 },
-  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
-
   helpButtonWrapper: {
     alignItems: 'flex-end',
     flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',

screen/wallets/details.js

@@ -48,9 +48,6 @@ import alert from '../../components/Alert';
 const prompt = require('../../blue_modules/prompt');
 
 const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
   scrollViewContent: {
     flexGrow: 1,
   },

screen/wallets/drawerList.js

@@ -94,14 +94,6 @@ const styles = StyleSheet.create({
   root: {
     flex: 1,
   },
-
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-  },
 });
 
 DrawerList.propTypes = {

screen/wallets/hodlHodl.js

@@ -939,13 +939,6 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '600',
   },
-  allOffersText: {
-    fontSize: 12,
-    color: '#9AA0AA',
-    position: 'absolute',
-    top: 0,
-    left: 15,
-  },
   locationText: {
     top: 0,
     left: 5,

screen/wallets/hodlHodlMyContracts.js

@@ -408,7 +408,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: BlueCurrentTheme.colors.feeText,
   },
-  loading: { backgroundColor: BlueCurrentTheme.colors.elevated },
   emptyComponentText: { textAlign: 'center', color: '#9AA0AA', paddingHorizontal: 16, backgroundColor: BlueCurrentTheme.colors.elevated },
   itemSeparatorComponent: { height: 0.5, width: '100%', backgroundColor: '#C8C8C8' },
   flexDirectionRow: { flexDirection: 'row' },

screen/wallets/importCustomDerivationPath.js

@@ -157,9 +157,6 @@ const styles = StyleSheet.create({
   flatListContainer: {
     marginHorizontal: 16,
   },
-  listContainer: {
-    minHeight: 100,
-  },
   center: {
     marginHorizontal: 16,
     alignItems: 'center',

screen/wallets/ldkViewLogs.js

@@ -26,12 +26,6 @@ const LdkViewLogs = () => {
     root: {
       backgroundColor: colors.elevated,
     },
-    text: {
-      borderColor: colors.formBorder,
-      borderBottomColor: colors.formBorder,
-      backgroundColor: colors.inputBackgroundColor,
-      color: colors.foregroundColor,
-    },
   });
 
   useEffect(() => {
@@ -141,31 +135,6 @@ const styles = StyleSheet.create({
   root: {
     flex: 1,
   },
-  text: {
-    paddingHorizontal: 8,
-    paddingVertical: 8,
-    marginTop: 5,
-    marginHorizontal: 20,
-    borderWidth: 1,
-    borderBottomWidth: 0.5,
-    borderRadius: 4,
-    textAlignVertical: 'top',
-  },
-  textMessage: {
-    minHeight: 50,
-  },
-  flex: {
-    flex: 1,
-  },
-  loading: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   button: {
     alignItems: 'center',
     padding: 10,

screen/wallets/list.js

@@ -61,16 +61,6 @@ const WalletsList = () => {
     listHeaderText: {
       color: colors.foregroundColor,
     },
-    ltRoot: {
-      backgroundColor: colors.ballOutgoingExpired,
-    },
-
-    ltTextBig: {
-      color: colors.foregroundColor,
-    },
-    ltTextSmall: {
-      color: colors.alternativeTextColor,
-    },
   });
 
   useFocusEffect(
@@ -410,28 +400,9 @@ const styles = StyleSheet.create({
     bottom: 60,
     right: 0,
   },
-  wrapper: {
-    flex: 1,
-  },
   walletsListWrapper: {
     flex: 1,
   },
-  headerStyle: {
-    ...Platform.select({
-      ios: {
-        marginTop: 44,
-        height: 32,
-        alignItems: 'flex-end',
-        justifyContent: 'center',
-      },
-      android: {
-        marginTop: 8,
-        height: 44,
-        alignItems: 'flex-end',
-        justifyContent: 'center',
-      },
-    }),
-  },
   headerTouch: {
     height: 48,
     paddingVertical: 10,
@@ -447,28 +418,6 @@ const styles = StyleSheet.create({
     fontSize: 24,
     marginVertical: 16,
   },
-  ltRoot: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginHorizontal: 16,
-    marginVertical: 16,
-    padding: 16,
-    borderRadius: 6,
-  },
-  ltTextWrap: {
-    flexDirection: 'column',
-  },
-  ltTextBig: {
-    fontSize: 16,
-    fontWeight: '600',
-    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-  },
-  ltTextSmall: {
-    fontSize: 13,
-    fontWeight: '500',
-    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
-  },
   footerRoot: {
     top: 80,
     height: 160,
@@ -485,9 +434,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: '600',
   },
-  listHeader: {
-    backgroundColor: '#FFFFFF',
-  },
   transaction: {
     marginHorizontal: 0,
   },

screen/wallets/provideEntropy.js

@@ -220,9 +220,6 @@ const Entropy = () => {
     entropyText: {
       color: colors.foregroundColor,
     },
-    coinBody: {
-      borderColor: colors.lightButton,
-    },
   });
 
   const push = v => v && dispatch({ type: 'push', value: v.value, bits: v.bits });

screen/wallets/reorderWallets.js

@@ -13,10 +13,6 @@ import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const styles = StyleSheet.create({
-  loading: {
-    flex: 1,
-    paddingTop: 20,
-  },
   root: {
     flex: 1,
   },
@@ -82,9 +78,6 @@ const ReorderWallets = () => {
     root: {
       backgroundColor: colors.elevated,
     },
-    loading: {
-      backgroundColor: colors.elevated,
-    },
     tip: {
       backgroundColor: colors.ballOutgoingExpired,
     },

screen/wallets/transactions.js

@@ -61,9 +61,6 @@ const WalletTransactions = () => {
   const walletActionButtonsRef = useRef();
 
   const stylesHook = StyleSheet.create({
-    advancedTransactionOptionsModalContent: {
-      backgroundColor: colors.elevated,
-    },
     listHeaderText: {
       color: colors.foregroundColor,
     },
@@ -271,7 +268,7 @@ const WalletTransactions = () => {
             <LNNodeBar canSend={lnNodeInfo.canSend} canReceive={lnNodeInfo.canReceive} itemPriceUnit={itemPriceUnit} />
           </View>
         )}
-        <View style={[styles.listHeaderTextRow, stylesHook.listHeaderTextRow]}>
+        <View style={styles.listHeaderTextRow}>
           <Text style={[styles.listHeaderText, stylesHook.listHeaderText]}>{loc.transactions.list_title}</Text>
           <TouchableOpacity
             accessibilityRole="button"
@@ -724,24 +721,6 @@ const styles = StyleSheet.create({
   marginBottom18: {
     marginBottom: 18,
   },
-  modalContent: {
-    backgroundColor: '#FFFFFF',
-    padding: 22,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    minHeight: 200,
-    height: 200,
-  },
-  advancedTransactionOptionsModalContent: {
-    padding: 22,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    minHeight: 130,
-  },
   walletDetails: {
     justifyContent: 'center',
     alignItems: 'flex-end',

screen/wallets/viewEditMultisigCosigners.js

@@ -72,57 +72,21 @@ const ViewEditMultisigCosigners = () => {
     root: {
       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,
-    },
-    vaultKeyCircle: {
-      backgroundColor: colors.buttonDisabledBackgroundColor,
-    },
     vaultKeyText: {
       color: colors.alternativeTextColor,
     },
-    feeFiatText: {
-      color: colors.alternativeTextColor,
-    },
     vaultKeyCircleSuccess: {
       backgroundColor: colors.msSuccessBG,
     },
-    vaultKeyTextSigned: {
-      color: colors.msSuccessBG,
-    },
-    word: {
-      backgroundColor: colors.inputBackgroundColor,
-    },
-    wordText: {
-      color: colors.labelText,
-    },
     tipKeys: {
       color: colors.alternativeTextColor,
     },
@@ -609,37 +573,9 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   itemKeyUnprovidedWrapper: { flexDirection: 'row', paddingTop: 16 },
-  vaultKeyCircle: {
-    width: 42,
-    height: 42,
-    borderRadius: 25,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   textDestination: { fontWeight: '600' },
   vaultKeyText: { fontSize: 18, fontWeight: 'bold' },
   vaultKeyTextWrapper: { justifyContent: 'center', alignItems: 'center', paddingLeft: 16 },
-  provideKeyButton: {
-    marginTop: 4,
-    marginLeft: 40,
-    height: 48,
-    borderRadius: 8,
-    flex: 1,
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    marginBottom: 8,
-  },
-
-  grayButton: {
-    marginTop: 24,
-    marginLeft: 40,
-    height: 48,
-    borderRadius: 8,
-    justifyContent: 'center',
-    paddingHorizontal: 16,
-    marginBottom: 8,
-  },
-  provideKeyButtonText: { fontWeight: '600', fontSize: 15 },
   newKeyModalContent: {
     paddingHorizontal: 22,
     paddingVertical: 32,
@@ -657,25 +593,6 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     minHeight: 400,
   },
-  word: {
-    width: 'auto',
-    marginRight: 8,
-    marginBottom: 8,
-    paddingTop: 6,
-    paddingBottom: 6,
-    paddingLeft: 8,
-    paddingRight: 8,
-    borderRadius: 4,
-  },
-  secretContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    flexWrap: 'wrap',
-  },
-  wordText: {
-    fontWeight: 'bold',
-  },
-  flexDirectionRow: { flexDirection: 'row', paddingVertical: 12 },
   vaultKeyCircleSuccess: {
     width: 42,
     height: 42,
@@ -683,8 +600,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  vaultKeyTextSignedWrapper: { justifyContent: 'center', alignItems: 'center', paddingLeft: 16 },
-  vaultKeyTextSigned: { fontSize: 18, fontWeight: 'bold' },
   exportButton: {
     height: 48,
     borderRadius: 8,
@@ -694,7 +609,6 @@ const styles = StyleSheet.create({
   },
   headerText: { fontSize: 15, color: '#13244D' },
   mainBlock: { marginHorizontal: 16 },
-  header2Text: { color: '#9AA0AA', fontSize: 14, paddingBottom: 20 },
   alignItemsCenter: { alignItems: 'center' },
   squareButtonWrapper: { height: 50, width: 250 },
   tipKeys: {