Merge pull request #5768 from BlueWallet/usethemeref

REF: Use our useTheme

BlueComponents.js

@@ -24,8 +24,7 @@ import {
 import Clipboard from '@react-native-clipboard/clipboard';
 import NetworkTransactionFees, { NetworkTransactionFee, NetworkTransactionFeeType } from './models/networkTransactionFees';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useTheme } from '@react-navigation/native';
-import { BlueCurrentTheme } from './components/themes';
+import { BlueCurrentTheme, useTheme } from './components/themes';
 import PlusIcon from './components/icons/PlusIcon';
 import loc, { formatStringAddTwoWhiteSpaces } from './loc';
 

Navigation.js

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo } from 'react';
 import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { Platform, useWindowDimensions, Dimensions, I18nManager } from 'react-native';
-import { useTheme } from '@react-navigation/native';
 
 import Settings from './screen/settings/settings';
 import About from './screen/settings/about';
@@ -86,6 +85,7 @@ import LdkViewLogs from './screen/wallets/ldkViewLogs';
 import PaymentCode from './screen/wallets/paymentCode';
 import PaymentCodesList from './screen/wallets/paymentCodesList';
 import loc from './loc';
+import { useTheme } from './components/themes';
 
 const WalletsStack = createNativeStackNavigator();
 

class/wallet-gradient.js

@@ -12,7 +12,7 @@ import { MultisigHDWallet } from './wallets/multisig-hd-wallet';
 import { HDAezeedWallet } from './wallets/hd-aezeed-wallet';
 import { LightningLdkWallet } from './wallets/lightning-ldk-wallet';
 import { SLIP39LegacyP2PKHWallet, SLIP39SegwitP2SHWallet, SLIP39SegwitBech32Wallet } from './wallets/slip39-wallets';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../components/themes';
 
 export default class WalletGradient {
   static hdSegwitP2SHWallet = ['#007AFF', '#0040FF'];

components/AddressInput.js

@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import { Text } from 'react-native-elements';
 import { findNodeHandle, Image, Keyboard, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { getSystemName } from 'react-native-device-info';
-import { useTheme } from '@react-navigation/native';
-
 import loc from '../loc';
 import * as NavigationService from '../NavigationService';
 import { requestCameraAuthorization } from '../helpers/scan-qr';
+import { useTheme } from './themes';
 const fs = require('../blue_modules/fs');
 
 const isDesktop = getSystemName() === 'Mac OS X';

components/AmountInput.js

@@ -3,12 +3,13 @@ import PropTypes from 'prop-types';
 import BigNumber from 'bignumber.js';
 import { Badge, Icon, Text } from 'react-native-elements';
 import { Image, LayoutAnimation, Pressable, StyleSheet, TextInput, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+
 import confirm from '../helpers/confirm';
 import { BitcoinUnit } from '../models/bitcoinUnits';
 import loc, { formatBalanceWithoutSuffix, formatBalancePlain, removeTrailingZeros } from '../loc';
 import { BlueText } from '../BlueComponents';
 import dayjs from 'dayjs';
+import { useTheme } from './themes';
 const currency = require('../blue_modules/currency');
 dayjs.extend(require('dayjs/plugin/localizedFormat'));
 

components/ArrowPicker.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Pressable, View, Keyboard } from 'react-native';
 import { Text, Icon } from 'react-native-elements';
 import React, { useState } from 'react';
 import loc from '../loc';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 interface IHash {
   [key: string]: string;
@@ -23,7 +23,6 @@ export const ArrowPicker = (props: ArrowPickerProps) => {
 
   const stylesHook = {
     text: {
-      // @ts-ignore: Ignore theme typescript error
       color: colors.foregroundColor,
     },
   };

components/BottomModal.js

@@ -4,7 +4,7 @@ import { StyleSheet, Platform, useWindowDimensions, View } from 'react-native';
 import Modal from 'react-native-modal';
 import { BlueButton, BlueSpacing10 } from '../BlueComponents';
 import loc from '../loc';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 const styles = StyleSheet.create({
   root: {

components/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 export const ButtonStyle = { default: 'default', destroy: 'destroy', grey: 'grey' };
 const Button = props => {

components/FloatButtons.js

@@ -1,7 +1,7 @@
 import React, { useState, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { View, Text, TouchableOpacity, StyleSheet, Dimensions, PixelRatio } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 const BORDER_RADIUS = 30;
 const PADDINGS = 8;

components/InputAccessoryAllFunds.js

@@ -2,11 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native-elements';
 import { InputAccessoryView, StyleSheet, Keyboard, Platform, View } from 'react-native';
-import { useTheme } from '@react-navigation/native';
-
 import loc from '../loc';
 import { BitcoinUnit } from '../models/bitcoinUnits';
 import { BlueButtonLink } from '../BlueComponents';
+import { useTheme } from './themes';
 
 const InputAccessoryAllFunds = ({ balance, canUseAll, onUseAllPressed }) => {
   const { colors } = useTheme();

components/LNNodeBar.js

@@ -3,7 +3,7 @@ import { View, Text, StyleSheet } from 'react-native';
 import loc, { formatBalanceWithoutSuffix } from '../loc';
 import PropTypes from 'prop-types';
 import { BitcoinUnit } from '../models/bitcoinUnits';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 export const LNNodeBar = props => {
   const { canReceive = 0, canSend = 0, nodeAlias = '', disabled = false, itemPriceUnit = BitcoinUnit.SATS } = props;

components/LdkButton.js

@@ -1,8 +1,9 @@
 /* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */
-import { useTheme } from '@react-navigation/native';
+
 import { Image, TouchableOpacity, View } from 'react-native';
 import { Text } from 'react-native-elements';
 import React from 'react';
+import { useTheme } from './themes';
 
 export const LdkButton = props => {
   const { colors } = useTheme();

components/MultipleStepsListItem.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { useTheme } from '@react-navigation/native';
+
 import { View, StyleSheet, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import PropTypes from 'prop-types';
 import { Icon } from 'react-native-elements';
+import { useTheme } from './themes';
 export const MultipleStepsListItemDashType = Object.freeze({ none: 0, top: 1, bottom: 2, topAndBottom: 3 });
 export const MultipleStepsListItemButtohType = Object.freeze({ partial: 0, full: 1 });
 

components/QRCodeComponent.tsx

@@ -5,7 +5,7 @@ import ToolTipMenu from './TooltipMenu';
 import Share from 'react-native-share';
 import loc from '../loc';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 interface QRCodeComponentProps {
   value: string;
@@ -108,7 +108,6 @@ const QRCodeComponent: React.FC<QRCodeComponentProps> = ({
       size={size}
       logoSize={logoSize}
       color="#000000"
-      // @ts-ignore: logoBackgroundColor is not in the type definition
       logoBackgroundColor={colors.brandingColor}
       backgroundColor="#FFFFFF"
       ecl={ecl}

components/SquareButton.js

@@ -2,7 +2,7 @@
 import React, { forwardRef } from 'react';
 import { TouchableOpacity, View, Text } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 export const SquareButton = forwardRef((props, ref) => {
   const { colors } = useTheme();

components/SquareEnumeratedWords.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { useTheme } from '@react-navigation/native';
+
 import { TouchableOpacity, Text, StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
+import { useTheme } from './themes';
 
 export const SquareEnumeratedWordsContentAlign = Object.freeze({ left: 'flex-start', center: 'center', right: 'flex-end' });
 const SquareEnumeratedWords = props => {

components/TransactionListItem.js

@@ -3,8 +3,7 @@ import React, { useState, useMemo, useCallback, useContext, useEffect, useRef }
 import { Linking, StyleSheet, View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { useNavigation, useTheme } from '@react-navigation/native';
-
+import { useNavigation } from '@react-navigation/native';
 import { BitcoinUnit } from '../models/bitcoinUnits';
 import * as NavigationService from '../NavigationService';
 import loc, { formatBalanceWithoutSuffix, transactionTimeToReadable } from '../loc';
@@ -19,6 +18,7 @@ import TransactionOffchainIncomingIcon from '../components/icons/TransactionOffc
 import TransactionOnchainIcon from '../components/icons/TransactionOnchainIcon';
 import TransactionOutgoingIcon from '../components/icons/TransactionOutgoingIcon';
 import TransactionPendingIcon from '../components/icons/TransactionPendingIcon';
+import { useTheme } from './themes';
 
 export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, walletID }) => {
   const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);

components/TransactionPendingIconBig.js

@@ -1,8 +1,9 @@
 /* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */
-import { useTheme } from '@react-navigation/native';
+
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
 import React from 'react';
+import { useTheme } from './themes';
 
 export const TransactionPendingIconBig = props => {
   const { colors } = useTheme();

components/WalletToImport.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native-elements';
 import { I18nManager, StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from './themes';
 
 const WalletToImport = ({ title, subtitle, active, onPress }) => {
   const { colors } = useTheme();

components/WalletsCarousel.js

@@ -14,7 +14,7 @@ import {
   FlatList,
   Pressable,
 } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+
 import LinearGradient from 'react-native-linear-gradient';
 import loc, { formatBalance, transactionTimeToReadable } from '../loc';
 import { LightningCustodianWallet, LightningLdkWallet, MultisigHDWallet } from '../class';
@@ -22,6 +22,7 @@ import WalletGradient from '../class/wallet-gradient';
 import { BluePrivateBalance } from '../BlueComponents';
 import { BlueStorageContext } from '../blue_modules/storage-context';
 import { isHandset, isTablet, isDesktop } from '../blue_modules/environment';
+import { useTheme } from './themes';
 
 const nStyles = StyleSheet.create({
   container: {

components/addresses/AddressItem.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { ListItem } from 'react-native-elements';
 import PropTypes from 'prop-types';
 import { AddressTypeBadge } from './AddressTypeBadge';
@@ -8,6 +8,7 @@ import loc, { formatBalance } from '../../loc';
 import TooltipMenu from '../TooltipMenu';
 import Clipboard from '@react-native-clipboard/clipboard';
 import Share from 'react-native-share';
+import { useTheme } from '../themes';
 
 const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }) => {
   const { colors } = useTheme();

components/addresses/AddressTypeBadge.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@react-navigation/native';
 import { StyleSheet, View, Text } from 'react-native';
 import loc, { formatStringAddTwoWhiteSpaces } from '../../loc';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   container: {

components/addresses/AddressTypeTabs.js

@@ -1,7 +1,7 @@
-import { useTheme } from '@react-navigation/native';
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import loc from '../../loc';
+import { useTheme } from '../themes';
 
 export const TABS = {
   EXTERNAL: 'receive',

components/icons/PlusIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { Avatar } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   ball: {

components/icons/TransactionExpiredIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

components/icons/TransactionIncomingIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

components/icons/TransactionOffchainIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

components/icons/TransactionOffchainIncomingIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

components/icons/TransactionOnchainIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

components/icons/TransactionOutgoingIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

components/icons/TransactionPendingIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useTheme } from '@react-navigation/native';
+import { useTheme } from '../themes';
 
 const styles = StyleSheet.create({
   boxIncoming: {

screen/lnd/ldkInfo.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet, Text, Keyboard, TouchableOpacity, SectionList } from 'react-native';
-import { RouteProp, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { SafeBlueArea, BlueButton, BlueSpacing20, BlueSpacing10, BlueLoading, BlueTextCentered } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -12,6 +12,7 @@ import Button, { ButtonStyle } from '../../components/Button';
 import { Psbt } from 'bitcoinjs-lib';
 import { AbstractWallet, LightningLdkWallet } from '../../class';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const selectWallet = require('../../helpers/select-wallet');
 const confirm = require('../../helpers/confirm');
 const LdkNodeInfoChannelStatus = { ACTIVE: 'Active', INACTIVE: 'Inactive', PENDING: 'PENDING', STATUS: 'status' };
@@ -32,7 +33,7 @@ const LdkInfo = () => {
   const refreshDataInterval = useRef<NodeJS.Timer>();
   const sectionList = useRef<SectionList | null>();
   const wallet: LightningLdkWallet = wallets.find((w: AbstractWallet) => w.getID() === walletID);
-  const { colors }: { colors: any } = useTheme();
+  const { colors } = useTheme();
   const { setOptions, navigate } = useNavigation();
   const name = useRoute().name;
   const [isLoading, setIsLoading] = useState(true);

screen/lnd/ldkOpenChannel.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { RouteProp, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { BlueLoading, SafeBlueArea, BlueButton, BlueDismissKeyboardInputAccessory, BlueSpacing20, BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -15,6 +15,7 @@ import { ArrowPicker } from '../../components/ArrowPicker';
 import { Psbt } from 'bitcoinjs-lib';
 import Biometric from '../../class/biometrics';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const currency = require('../../blue_modules/currency');
 
 type LdkOpenChannelProps = RouteProp<

screen/lnd/lndCreateInvoice.js

@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { Icon } from 'react-native-elements';
-import { useFocusEffect, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueAlertWalletExportReminder, BlueButton, BlueDismissKeyboardInputAccessory, BlueLoading } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -29,6 +29,7 @@ import Notifications from '../../blue_modules/notifications';
 import alert from '../../components/Alert';
 import { parse } from 'url'; // eslint-disable-line n/no-deprecated-api
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 const currency = require('../../blue_modules/currency');
 const torrific = require('../../blue_modules/torrific');
 

screen/lnd/lndViewAdditionalInvoiceInformation.js

@@ -1,13 +1,13 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { View, Share, StyleSheet } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
-
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { BlueButton, BlueCopyTextToClipboard, BlueLoading, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 
 const LNDViewAdditionalInvoiceInformation = () => {
   const { walletID } = useRoute().params;

screen/lnd/lndViewAdditionalInvoicePreImage.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useRoute, useTheme } from '@react-navigation/native';
-
+import { useRoute } from '@react-navigation/native';
 import { BlueCopyTextToClipboard, SafeBlueArea, BlueSpacing20, BlueTextCentered } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
 import QRCodeComponent from '../../components/QRCodeComponent';
+import { useTheme } from '../../components/themes';
 
 const LNDViewAdditionalInvoicePreImage = () => {
   // state = { walletInfo: undefined };

screen/lnd/lndViewInvoice.js

@@ -4,7 +4,7 @@ import Share from 'react-native-share';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { Icon } from 'react-native-elements';
 import QRCodeComponent from '../../components/QRCodeComponent';
-import { useNavigation, useNavigationState, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useNavigationState, useRoute } from '@react-navigation/native';
 import {
   BlueLoading,
   BlueText,
@@ -20,6 +20,7 @@ import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import { SuccessView } from '../send/success';
 import LNDCreateInvoice from './lndCreateInvoice';
+import { useTheme } from '../../components/themes';
 
 const LNDViewInvoice = () => {
   const { invoice, walletID } = useRoute().params;

screen/lnd/lnurlAuth.js

@@ -9,10 +9,11 @@ import Lnurl from '../../class/lnurl';
 import { Chain } from '../../models/bitcoinUnits';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import selectWallet from '../../helpers/select-wallet';
 import URL from 'url';
 import { SuccessView } from '../send/success';
+import { useTheme } from '../../components/themes';
 
 const AuthState = {
   USER_PROMPT: 0,

screen/lnd/lnurlPay.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { I18nManager, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { Icon } from 'react-native-elements';
 
 import {
@@ -22,6 +22,7 @@ import loc, { formatBalanceWithoutSuffix, formatBalance } from '../../loc';
 import Biometric from '../../class/biometrics';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const prompt = require('../../helpers/prompt');
 const currency = require('../../blue_modules/currency');
 

screen/lnd/scanLndInvoice.js

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { Icon } from 'react-native-elements';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { useFocusEffect, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueButton, BlueCard, BlueDismissKeyboardInputAccessory, BlueLoading, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -24,6 +24,7 @@ import Biometric from '../../class/biometrics';
 import loc, { formatBalanceWithoutSuffix } from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const currency = require('../../blue_modules/currency');
 
 const ScanLndInvoice = () => {

screen/receive/details.js

@@ -10,7 +10,7 @@ import {
   TextInput,
   View,
 } from 'react-native';
-import { useNavigation, useRoute, useTheme, useFocusEffect } from '@react-navigation/native';
+import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
 import Share from 'react-native-share';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import {
@@ -37,6 +37,7 @@ import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { TransactionPendingIconBig } from '../../components/TransactionPendingIconBig';
 import * as BlueElectrum from '../../blue_modules/BlueElectrum';
 import { SuccessView } from '../send/success';
+import { useTheme } from '../../components/themes';
 const currency = require('../../blue_modules/currency');
 
 const ReceiveDetails = () => {

screen/send/ScanQRCode.js

@@ -4,12 +4,13 @@ import { CameraScreen } from 'react-native-camera-kit';
 import { Icon } from 'react-native-elements';
 import { launchImageLibrary } from 'react-native-image-picker';
 import { decodeUR, extractSingleWorkload, BlueURDecoder } from '../../blue_modules/ur';
-import { useNavigation, useRoute, useIsFocused, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute, useIsFocused } from '@react-navigation/native';
 import loc from '../../loc';
 import { BlueLoading, BlueText, BlueButton, BlueSpacing40 } from '../../BlueComponents';
 import alert from '../../components/Alert';
 import { openPrivacyDesktopSettings } from '../../class/camera';
 import { isCameraAuthorizationStatusGranted } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 
 const LocalQRCode = require('@remobile/react-native-qrcode-local-image');
 const createHash = require('create-hash');

screen/send/broadcast.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { ActivityIndicator, Alert, KeyboardAvoidingView, Linking, StyleSheet, Platform, TextInput, View, Keyboard } from 'react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { useRoute, useTheme, useNavigation } from '@react-navigation/native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 import * as bitcoin from 'bitcoinjs-lib';
 
 import loc from '../../loc';
@@ -21,6 +21,7 @@ import {
 } from '../../BlueComponents';
 import BlueElectrum from '../../blue_modules/BlueElectrum';
 import Notifications from '../../blue_modules/notifications';
+import { useTheme } from '../../components/themes';
 
 const scanqr = require('../../helpers/scan-qr');
 

screen/send/coinControl.js

@@ -16,7 +16,7 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
-import { useRoute, useTheme, useNavigation } from '@react-navigation/native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 import * as RNLocalize from 'react-native-localize';
 
 import loc, { formatBalance } from '../../loc';
@@ -27,6 +27,7 @@ import BottomModal from '../../components/BottomModal';
 import { FContainer, FButton } from '../../components/FloatButtons';
 import debounce from '../../blue_modules/debounce';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 
 const FrozenBadge = () => {
   const { colors } = useTheme();

screen/send/confirm.js

@@ -14,8 +14,9 @@ import loc, { formatBalance, formatBalanceWithoutSuffix } from '../../loc';
 import Notifications from '../../blue_modules/notifications';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { Psbt } from 'bitcoinjs-lib';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const currency = require('../../blue_modules/currency');
 const BlueElectrum = require('../../blue_modules/BlueElectrum');
 const Bignumber = require('bignumber.js');

screen/send/create.js

@@ -13,9 +13,10 @@ import { BitcoinUnit } from '../../models/bitcoinUnits';
 import loc from '../../loc';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
 import { isDesktop } from '../../blue_modules/environment';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import alert from '../../components/Alert';
 import { PERMISSIONS, RESULTS, request } from 'react-native-permissions';
+import { useTheme } from '../../components/themes';
 const bitcoin = require('bitcoinjs-lib');
 const currency = require('../../blue_modules/currency');
 

screen/send/details.js

@@ -16,7 +16,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { useNavigation, useRoute, useTheme, useFocusEffect } from '@react-navigation/native';
+import { useNavigation, useRoute, useFocusEffect } from '@react-navigation/native';
 import { Icon } from 'react-native-elements';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
@@ -41,6 +41,7 @@ import { AbstractHDElectrumWallet } from '../../class/wallets/abstract-hd-electr
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import ToolTipMenu from '../../components/TooltipMenu';
 import { requestCameraAuthorization, scanQrHelper } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 const currency = require('../../blue_modules/currency');
 const prompt = require('../../helpers/prompt');
 const fs = require('../../blue_modules/fs');

screen/send/isItMyAddress.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useRef } from 'react';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { StyleSheet, View, KeyboardAvoidingView, Platform, TextInput, Keyboard } from 'react-native';
 
 import loc from '../../loc';
@@ -7,6 +7,7 @@ import { BlueButton, BlueButtonLink, BlueCard, BlueSpacing10, BlueSpacing20, Blu
 import navigationStyle from '../../components/navigationStyle';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 
 const IsItMyAddress = () => {
   /** @type {AbstractWallet[]} */

screen/send/psbtMultisig.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueButton, BlueCard, BlueText, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -9,6 +9,7 @@ import loc from '../../loc';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const bitcoin = require('bitcoinjs-lib');
 const BigNumber = require('bignumber.js');
 const currency = require('../../blue_modules/currency');

screen/send/psbtMultisigQRCode.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, findNodeHandle, ScrollView, StyleSheet, View } from 'react-native';
 import { getSystemName } from 'react-native-device-info';
-import { useNavigation, useRoute, useTheme, useIsFocused } from '@react-navigation/native';
+import { useNavigation, useRoute, useIsFocused } from '@react-navigation/native';
 
 import { BlueSpacing20, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -11,6 +11,7 @@ import { SquareButton } from '../../components/SquareButton';
 import loc from '../../loc';
 import alert from '../../components/Alert';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 const bitcoin = require('bitcoinjs-lib');
 const fs = require('../../blue_modules/fs');
 

screen/send/psbtWithHardwareWallet.js

@@ -3,7 +3,7 @@ import { ActivityIndicator, TouchableOpacity, ScrollView, View, TextInput, Linki
 import Clipboard from '@react-native-clipboard/clipboard';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import DocumentPicker from 'react-native-document-picker';
-import { useNavigation, useRoute, useTheme, useIsFocused } from '@react-navigation/native';
+import { useNavigation, useRoute, useIsFocused } from '@react-navigation/native';
 import RNFS from 'react-native-fs';
 import Biometric from '../../class/biometrics';
 
@@ -15,6 +15,7 @@ import Notifications from '../../blue_modules/notifications';
 import { DynamicQRCode } from '../../components/DynamicQRCode';
 import alert from '../../components/Alert';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 const BlueElectrum = require('../../blue_modules/BlueElectrum');
 const bitcoin = require('bitcoinjs-lib');
 const fs = require('../../blue_modules/fs');

screen/send/success.js

@@ -4,11 +4,12 @@ import LottieView from 'lottie-react-native';
 import { View, StyleSheet, SafeAreaView } from 'react-native';
 import { Text } from 'react-native-elements';
 import BigNumber from 'bignumber.js';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueButton, BlueCard } from '../../BlueComponents';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import loc from '../../loc';
+import { useTheme } from '../../components/themes';
 
 const Success = () => {
   const pop = () => {

screen/settings/GeneralSettings.tsx

@@ -3,10 +3,11 @@ import { ScrollView, Platform, Pressable, TouchableOpacity, StyleSheet } from 'r
 
 import navigationStyle from '../../components/navigationStyle';
 import { BlueLoading, BlueText, BlueSpacing20, BlueListItem, BlueCard } from '../../BlueComponents';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { isURv1Enabled, clearUseURv1, setUseURv1 } from '../../blue_modules/ur';
+import { useTheme } from '../../components/themes';
 
 const styles = StyleSheet.create({
   root: {

screen/settings/SettingsPrivacy.js

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { ScrollView, TouchableWithoutFeedback, StyleSheet, Platform, Pressable, Text } from 'react-native';
 import { openSettings } from 'react-native-permissions';
-import { useTheme } from '@react-navigation/native';
 
 import navigationStyle from '../../components/navigationStyle';
 import { BlueText, BlueSpacing20, BlueListItem, BlueCard, BlueHeaderDefaultSub, BlueSpacing40 } from '../../BlueComponents';
@@ -10,6 +9,7 @@ import DeviceQuickActions from '../../class/quick-actions';
 import BlueClipboard from '../../blue_modules/clipboard';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import WidgetCommunication from '../../blue_modules/WidgetCommunication';
+import { useTheme } from '../../components/themes';
 
 const A = require('../../blue_modules/analytics');
 

screen/settings/about.js

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { TouchableOpacity, ScrollView, Linking, Image, View, Text, StyleSheet, useWindowDimensions, Platform, Alert } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { Icon } from 'react-native-elements';
 import { getApplicationName, getVersion, getBundleId, getBuildNumber, getUniqueIdSync, hasGmsSync } from 'react-native-device-info';
 import Rate, { AndroidMarket } from 'react-native-rate';
@@ -11,6 +11,7 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import alert from '../../components/Alert';
 import { HDSegwitBech32Wallet } from '../../class';
+import { useTheme } from '../../components/themes';
 
 const A = require('../../blue_modules/analytics');
 const branch = require('../../current-branch.json');

screen/settings/currency.js

@@ -1,6 +1,6 @@
 import React, { useState, useContext, useLayoutEffect } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 
 import navigationStyle from '../../components/navigationStyle';
 import { SafeBlueArea, BlueListItem, BlueText, BlueCard, BlueSpacing10 } from '../../BlueComponents';
@@ -9,6 +9,7 @@ import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import dayjs from 'dayjs';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 dayjs.extend(require('dayjs/plugin/calendar'));
 const currency = require('../../blue_modules/currency');
 

screen/settings/language.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useContext } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueListItem } from '../../BlueComponents';
 import loc, { saveLanguage } from '../../loc';
 import { AvailableLanguages } from '../../loc/languages';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 
 const styles = StyleSheet.create({
   flex: {

screen/settings/notificationSettings.js

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ScrollView, TouchableWithoutFeedback, I18nManager, StyleSheet, Linking, View, TextInput } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+
 import { Button } from 'react-native-elements';
 
 import navigationStyle from '../../components/navigationStyle';
 import { BlueButton, BlueCard, BlueCopyToClipboardButton, BlueListItem, BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
 import loc from '../../loc';
-import { BlueCurrentTheme } from '../../components/themes';
+import { BlueCurrentTheme, useTheme } from '../../components/themes';
 import Notifications from '../../blue_modules/notifications';
 import alert from '../../components/Alert';
 

screen/transactions/details.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useLayoutEffect, useState } from 'react';
 import { View, ScrollView, TouchableOpacity, Text, TextInput, Linking, StyleSheet, Keyboard } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { BlueCard, BlueCopyToClipboardButton, BlueLoading, BlueSpacing20, BlueText } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -9,6 +9,7 @@ import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import ToolTipMenu from '../../components/TooltipMenu';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const dayjs = require('dayjs');
 
 function onlyUnique(value, index, self) {

screen/wallets/add.js

@@ -26,13 +26,14 @@ import {
 import navigationStyle from '../../components/navigationStyle';
 import { HDSegwitBech32Wallet, SegwitP2SHWallet, HDSegwitP2SHWallet, LightningCustodianWallet, LightningLdkWallet } from '../../class';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { useTheme, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { Chain } from '../../models/bitcoinUnits';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { LdkButton } from '../../components/LdkButton';
 import alert from '../../components/Alert';
 import useAsyncPromise from '../../hooks/useAsyncPromise';
+import { useTheme } from '../../components/themes';
 const BlueApp = require('../../BlueApp');
 const AppStorage = BlueApp.AppStorage;
 const A = require('../../blue_modules/analytics');

screen/wallets/addMultisig.js

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 import { Keyboard, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import LottieView from 'lottie-react-native';
 import { Icon } from 'react-native-elements';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { BlueButton, BlueListItem, BlueSpacing20 } from '../../BlueComponents';
@@ -11,6 +11,7 @@ import BottomModal from '../../components/BottomModal';
 import { MultisigHDWallet } from '../../class';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 
 const WalletsAddMultisig = () => {
   const { colors } = useTheme();

screen/wallets/addMultisigHelp.js

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Image, View, Text, ScrollView, StyleSheet } from 'react-native';
-import { useTheme } from '@react-navigation/native';
+
 import { SafeBlueArea, BlueLoading } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import loc from '../../loc';
+import { useTheme } from '../../components/themes';
 
 const WalletsAddMultisigHelp = () => {
   const [isLoading, setIsLoading] = useState(true);

screen/wallets/addMultisigStep2.js

@@ -15,7 +15,7 @@ import {
   findNodeHandle,
 } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { getSystemName } from 'react-native-device-info';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 
@@ -43,6 +43,7 @@ import QRCodeComponent from '../../components/QRCodeComponent';
 import alert from '../../components/Alert';
 import confirm from '../../helpers/confirm';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 
 const prompt = require('../../helpers/prompt');
 const A = require('../../blue_modules/analytics');

screen/wallets/addresses.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useContext, useRef, useEffect, useLayoutEffect } from 'react';
 import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
-import { useFocusEffect, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import Privacy from '../../blue_modules/Privacy';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import loc from '../../loc';
@@ -8,6 +8,7 @@ import navigationStyle from '../../components/navigationStyle';
 import { AddressItem } from '../../components/addresses/AddressItem';
 import { AddressTypeTabs, TABS } from '../../components/addresses/AddressTypeTabs';
 import { WatchOnlyWallet } from '../../class';
+import { useTheme } from '../../components/themes';
 
 export const totalBalance = ({ c, u } = { c: 0, u: 0 }) => c + u;
 

screen/wallets/details.js

@@ -33,7 +33,7 @@ import {
   LightningLdkWallet,
 } from '../../class';
 import loc, { formatBalanceWithoutSuffix } from '../../loc';
-import { useTheme, useRoute, useNavigation } from '@react-navigation/native';
+import { useRoute, useNavigation } from '@react-navigation/native';
 import RNFS from 'react-native-fs';
 import Share from 'react-native-share';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -44,6 +44,7 @@ import alert from '../../components/Alert';
 import { BitcoinUnit, Chain } from '../../models/bitcoinUnits';
 import { writeFileAndExport } from '../../blue_modules/fs';
 import { PERMISSIONS, RESULTS, request } from 'react-native-permissions';
+import { useTheme } from '../../components/themes';
 
 const prompt = require('../../helpers/prompt');
 

screen/wallets/drawerList.js

@@ -3,12 +3,13 @@ import { StyleSheet } from 'react-native';
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import PropTypes from 'prop-types';
-import { useIsFocused, useTheme } from '@react-navigation/native';
+import { useIsFocused } from '@react-navigation/native';
 
 import { BlueHeaderDefaultMain } from '../../BlueComponents';
 import WalletsCarousel from '../../components/WalletsCarousel';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 
 const DrawerList = props => {
   const walletsCarousel = useRef();

screen/wallets/export.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useContext, useRef, useEffect } from 'react';
 import { InteractionManager, ScrollView, ActivityIndicator, View, StyleSheet, AppState } from 'react-native';
-import { useTheme, useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
+import { useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
 
 import { BlueSpacing20, SafeBlueArea, BlueText, BlueCopyTextToClipboard, BlueCard } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -11,6 +11,7 @@ import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import HandoffComponent from '../../components/handoff';
+import { useTheme } from '../../components/themes';
 
 const WalletExport = () => {
   const { wallets, saveToDisk } = useContext(BlueStorageContext);

screen/wallets/exportMultisigCoordinationSetup.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useRef, useState } from 'react';
 import { ActivityIndicator, InteractionManager, ScrollView, StyleSheet, View } from 'react-native';
-import { useFocusEffect, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -10,6 +10,7 @@ import Biometric from '../../class/biometrics';
 import loc from '../../loc';
 import { SquareButton } from '../../components/SquareButton';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 const fs = require('../../blue_modules/fs');
 
 const ExportMultisigCoordinationSetup = () => {

screen/wallets/import.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
 import { Platform, View, Keyboard, StyleSheet, Switch, TouchableWithoutFeedback } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
 import {
   BlueButton,
@@ -17,6 +17,7 @@ import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 
 const WalletsImport = () => {
   const navigation = useNavigation();

screen/wallets/importCustomDerivationPath.js

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
 import { FlatList, StyleSheet, TextInput, View } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
 import { BlueButton, BlueFormLabel, BlueSpacing20, BlueTextCentered, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -10,6 +10,7 @@ import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { HDLegacyP2PKHWallet, HDSegwitP2SHWallet, HDSegwitBech32Wallet } from '../../class';
 import { validateBip32 } from '../../class/wallet-import';
 import debounce from '../../blue_modules/debounce';
+import { useTheme } from '../../components/themes';
 
 const WRONG_PATH = 'WRONG_PATH';
 const WALLET_FOUND = 'WALLET_FOUND';

screen/wallets/importDiscovery.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState, useRef, useMemo } from 'react';
 import { ActivityIndicator, Alert, FlatList, LayoutAnimation, StyleSheet, View } from 'react-native';
 import IdleTimerManager from 'react-native-idle-timer';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { BlueButton, BlueButtonLink, BlueFormLabel, BlueSpacing10, BlueSpacing20, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -11,6 +11,7 @@ import { HDSegwitBech32Wallet } from '../../class';
 import startImport from '../../class/wallet-import';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import prompt from '../../helpers/prompt';
+import { useTheme } from '../../components/themes';
 
 const ImportWalletDiscovery = () => {
   const navigation = useNavigation();

screen/wallets/importSpeed.js

@@ -1,12 +1,12 @@
 import React, { useContext, useState } from 'react';
 import { Alert, View, StyleSheet, TextInput, ActivityIndicator } from 'react-native';
-import { useNavigation, useTheme } from '@react-navigation/native';
-
+import { useNavigation } from '@react-navigation/native';
 import { HDSegwitBech32Wallet, WatchOnlyWallet } from '../../class';
 import loc from '../../loc';
 import { BlueButton, BlueFormLabel, BlueFormMultiInput, BlueSpacing20, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 
 const WalletsImportSpeed = () => {
   const navigation = useNavigation();

screen/wallets/ldkViewLogs.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useContext, useRef } from 'react';
 import { StyleSheet, View, ScrollView, TouchableOpacity } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { BlueLoading, BlueSpacing20, BlueText, SafeBlueArea } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -8,6 +8,7 @@ import loc from '../../loc';
 import { Icon } from 'react-native-elements';
 import { LightningLdkWallet } from '../../class';
 import alert from '../../components/Alert';
+import { useTheme } from '../../components/themes';
 const fs = require('../../blue_modules/fs');
 
 const LdkViewLogs = () => {

screen/wallets/list.js

@@ -20,13 +20,14 @@ import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import ActionSheet from '../ActionSheet';
 import loc from '../../loc';
 import { FContainer, FButton } from '../../components/FloatButtons';
-import { useFocusEffect, useIsFocused, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useIsFocused, useNavigation, useRoute } from '@react-navigation/native';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { isDesktop, isTablet } from '../../blue_modules/environment';
 import BlueClipboard from '../../blue_modules/clipboard';
 import navigationStyle from '../../components/navigationStyle';
 import { TransactionListItem } from '../../components/TransactionListItem';
 import { scanQrHelper } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 
 const A = require('../../blue_modules/analytics');
 const fs = require('../../blue_modules/fs');

screen/wallets/pleaseBackup.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback, useContext } from 'react';
 import { ActivityIndicator, View, BackHandler, Text, ScrollView, StyleSheet, I18nManager } from 'react-native';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
 import { SafeBlueArea, BlueButton } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -8,6 +8,7 @@ import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { AbstractWallet } from '../../class';
+import { useTheme } from '../../components/themes';
 
 const PleaseBackup: React.FC = () => {
   const { wallets } = useContext(BlueStorageContext);
@@ -19,19 +20,15 @@ const PleaseBackup: React.FC = () => {
 
   const stylesHook = StyleSheet.create({
     flex: {
-      // @ts-ignore: Ignore
       backgroundColor: colors.elevated,
     },
     word: {
-      // @ts-ignore: Ignore
       backgroundColor: colors.inputBackgroundColor,
     },
     wortText: {
-      // @ts-ignore: Ignore
       color: colors.labelText,
     },
     pleaseText: {
-      // @ts-ignore: Ignore
       color: colors.foregroundColor,
     },
   });

screen/wallets/pleaseBackupLNDHub.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { View, StyleSheet, ScrollView, BackHandler } from 'react-native';
 
 import { BlueButton, BlueCopyTextToClipboard, BlueSpacing20, BlueTextCentered, SafeBlueArea } from '../../BlueComponents';
@@ -8,6 +8,7 @@ import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
+import { useTheme } from '../../components/themes';
 
 const PleaseBackupLNDHub = () => {
   const { wallets } = useContext(BlueStorageContext);

screen/wallets/pleaseBackupLdk.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useContext, useEffect } from 'react';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { View, useWindowDimensions, StyleSheet, BackHandler, ScrollView } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
 import { BlueButton, BlueCopyTextToClipboard, BlueSpacing20, BlueTextCentered, SafeBlueArea } from '../../BlueComponents';
@@ -7,6 +7,7 @@ import navigationStyle from '../../components/navigationStyle';
 import Privacy from '../../blue_modules/Privacy';
 import loc from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 
 const PleaseBackupLdk = () => {
   const { wallets } = useContext(BlueStorageContext);

screen/wallets/provideEntropy.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import BN from 'bignumber.js';
 import { Dimensions, PixelRatio, View, ScrollView, Text, Image, TouchableOpacity, StyleSheet, useWindowDimensions } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 
-import { BlueCurrentTheme } from '../../components/themes';
+import { BlueCurrentTheme, useTheme } from '../../components/themes';
 import { FContainer, FButton } from '../../components/FloatButtons';
 import { BlueSpacing20, SafeBlueArea, BlueTabs } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';

screen/wallets/reorderWallets.js

@@ -4,13 +4,14 @@ import { BluePrivateBalance } from '../../BlueComponents';
 import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';
 import LinearGradient from 'react-native-linear-gradient';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { useNavigation, useTheme } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import navigationStyle from '../../components/navigationStyle';
 import { LightningCustodianWallet, LightningLdkWallet, MultisigHDWallet } from '../../class';
 import WalletGradient from '../../class/wallet-gradient';
 import loc, { formatBalance, transactionTimeToReadable } from '../../loc';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useTheme } from '../../components/themes';
 
 const styles = StyleSheet.create({
   root: {

screen/wallets/selectWallet.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { View, ActivityIndicator, Image, Text, TouchableOpacity, I18nManager, FlatList, StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import { useRoute, useTheme, useNavigation, useNavigationState } from '@react-navigation/native';
+import { useRoute, useNavigation, useNavigationState } from '@react-navigation/native';
 
 import { SafeBlueArea, BlueText, BlueSpacing20, BluePrivateBalance } from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
@@ -10,6 +10,7 @@ import WalletGradient from '../../class/wallet-gradient';
 import loc, { formatBalance, transactionTimeToReadable } from '../../loc';
 import { LightningLdkWallet, MultisigHDWallet, LightningCustodianWallet } from '../../class';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
+import { useTheme } from '../../components/themes';
 
 const SelectWallet = () => {
   const { chainType, onWalletSelect, availableWallets, noWalletExplanationText } = useRoute().params;

screen/wallets/signVerify.js

@@ -11,7 +11,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { useRoute, useTheme } from '@react-navigation/native';
+import { useRoute } from '@react-navigation/native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { Icon } from 'react-native-elements';
 import Share from 'react-native-share';
@@ -20,6 +20,7 @@ import navigationStyle from '../../components/navigationStyle';
 import { FContainer, FButton } from '../../components/FloatButtons';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
 import loc from '../../loc';
+import { useTheme } from '../../components/themes';
 
 const SignVerify = () => {
   const { colors } = useTheme();

screen/wallets/transactions.js

@@ -16,7 +16,7 @@ import {
   I18nManager,
 } from 'react-native';
 import { Icon } from 'react-native-elements';
-import { useRoute, useNavigation, useTheme, useFocusEffect } from '@react-navigation/native';
+import { useRoute, useNavigation, useFocusEffect } from '@react-navigation/native';
 import { Chain } from '../../models/bitcoinUnits';
 import { BlueAlertWalletExportReminder } from '../../BlueComponents';
 import WalletGradient from '../../class/wallet-gradient';
@@ -34,6 +34,7 @@ import { TransactionListItem } from '../../components/TransactionListItem';
 import alert from '../../components/Alert';
 import PropTypes from 'prop-types';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 
 const fs = require('../../blue_modules/fs');
 const BlueElectrum = require('../../blue_modules/BlueElectrum');

screen/wallets/viewEditMultisigCosigners.js

@@ -14,7 +14,7 @@ import {
   View,
 } from 'react-native';
 import { Icon, Badge } from 'react-native-elements';
-import { useFocusEffect, useNavigation, useRoute, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
 import {
   BlueButton,
   BlueButtonLink,
@@ -43,6 +43,7 @@ import { encodeUR } from '../../blue_modules/ur';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import alert from '../../components/Alert';
 import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { useTheme } from '../../components/themes';
 const fs = require('../../blue_modules/fs');
 const prompt = require('../../helpers/prompt');
 

screen/wallets/xpub.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import { InteractionManager, ActivityIndicator, View, StyleSheet } from 'react-native';
-import { useFocusEffect, useRoute, useNavigation, useTheme } from '@react-navigation/native';
+import { useFocusEffect, useRoute, useNavigation } from '@react-navigation/native';
 import navigationStyle from '../../components/navigationStyle';
 import { BlueSpacing20, SafeBlueArea, BlueText, BlueCopyTextToClipboard, BlueButton } from '../../BlueComponents';
 import Privacy from '../../blue_modules/Privacy';
@@ -10,6 +10,7 @@ import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import HandoffComponent from '../../components/handoff';
 import Share from 'react-native-share';
+import { useTheme } from '../../components/themes';
 
 const styles = StyleSheet.create({
   root: {