FIX: Removed some ts-ignores

components/ListItem.tsx

@@ -7,7 +7,7 @@ import { useTheme } from './themes';
 // Update the type for the props
 interface ListItemProps {
   rightIcon?: any;
-  leftAvatar?: React.Component;
+  leftAvatar?: React.JSX.Element;
   containerStyle?: object;
   Component?: typeof React.Component | typeof PressableWrapper;
   bottomDivider?: boolean;
@@ -27,6 +27,7 @@ interface ListItemProps {
   isLoading?: boolean;
   chevron?: boolean;
   checkmark?: boolean;
+  subtitleProps?: object;
 }
 
 export class PressableWrapper extends React.Component<PressableProps> {

components/TransactionListItem.tsx

@@ -1,9 +1,7 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Clipboard from '@react-native-clipboard/clipboard';
-import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, StyleSheet, View } from 'react-native';
-
 import { BlueStorageContext } from '../blue_modules/storage-context';
 import Lnurl from '../class/lnurl';
 import { LightningTransaction, Transaction } from '../class/wallets/types';
@@ -16,12 +14,14 @@ import TransactionOutgoingIcon from '../components/icons/TransactionOutgoingIcon
 import TransactionPendingIcon from '../components/icons/TransactionPendingIcon';
 import loc, { formatBalanceWithoutSuffix, transactionTimeToReadable } from '../loc';
 import { BitcoinUnit } from '../models/bitcoinUnits';
-import * as NavigationService from '../NavigationService';
 import { useSettings } from './Context/SettingsContext';
 import ListItem from './ListItem';
 import { useTheme } from './themes';
 import ToolTipMenu from './TooltipMenu';
-import { Action } from './types';
+import { Action, ToolTipMenuProps } from './types';
+import { useExtendedNavigation } from '../hooks/useExtendedNavigation';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { DetailViewStackParamList } from '../navigation/DetailViewStackParamList';
 
 interface TransactionListItemProps {
   itemPriceUnit: BitcoinUnit;
@@ -29,11 +29,13 @@ interface TransactionListItemProps {
   item: Transaction & LightningTransaction; // using type intersection to have less issues with ts
 }
 
+type NavigationProps = NativeStackNavigationProp<DetailViewStackParamList>;
+
 export const TransactionListItem: React.FC<TransactionListItemProps> = React.memo(({ item, itemPriceUnit = BitcoinUnit.BTC, walletID }) => {
   const [subtitleNumberOfLines, setSubtitleNumberOfLines] = useState(1);
   const { colors } = useTheme();
-  const { navigate } = useNavigation();
+  const { navigate } = useExtendedNavigation<NavigationProps>();
-  const menuRef = useRef();
+  const menuRef = useRef<ToolTipMenuProps>();
   const { txMetadata, counterpartyMetadata, wallets } = useContext(BlueStorageContext);
   const { preferredFiatCurrency, language } = useSettings();
   const containerStyle = useMemo(
@@ -200,10 +202,8 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
   }, [subtitle]);
 
   const onPress = useCallback(async () => {
-    // @ts-ignore: idk how to fix
     menuRef?.current?.dismissMenu?.();
     if (item.hash) {
-      // @ts-ignore: idk how to fix
       navigate('TransactionStatus', { hash: item.hash, walletID });
     } else if (item.type === 'user_invoice' || item.type === 'payment_request' || item.type === 'paid_invoice') {
       const lightningWallet = wallets.filter(wallet => wallet?.getID() === item.walletID);
@@ -217,8 +217,7 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
           }
           const loaded = await LN.loadSuccessfulPayment(paymentHash);
           if (loaded) {
-            NavigationService.navigate('ScanLndInvoiceRoot', {
+            navigate('ScanLndInvoiceRoot', {
-              // @ts-ignore: idk how to fix
               screen: 'LnurlPaySuccess',
               params: {
                 paymentHash,
@@ -232,7 +231,6 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
           console.log(e);
         }
 
-        // @ts-ignore: idk how to fix
         navigate('LNDViewInvoice', {
           invoice: item,
           walletID: lightningWallet[0].getID(),
@@ -347,7 +345,6 @@ export const TransactionListItem: React.FC<TransactionListItemProps> = React.mem
     <View style={styles.container}>
       <ToolTipMenu ref={menuRef} actions={toolTipActions} onPressMenuItem={onToolTipPress} onPress={onPress}>
         <ListItem
-          // @ts-ignore wtf
           leftAvatar={avatar}
           title={title}
           subtitleNumberOfLines={subtitleNumberOfLines}

components/TransactionsNavigationHeader.tsx

@@ -12,6 +12,7 @@ import { FiatUnit } from '../models/fiatUnit';
 import { BlurredBalanceView } from './BlurredBalanceView';
 import { useSettings } from './Context/SettingsContext';
 import ToolTipMenu from './TooltipMenu';
+import { ToolTipMenuProps } from './types';
 
 interface TransactionsNavigationHeaderProps {
   wallet: TWallet;
@@ -31,22 +32,17 @@ interface TransactionsNavigationHeaderProps {
 }
 
 const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps> = ({
-  // @ts-ignore: Ugh
   wallet: initialWallet,
-  // @ts-ignore: Ugh
   onWalletUnitChange,
-  // @ts-ignore: Ugh
   navigation,
-  // @ts-ignore: Ugh
   onManageFundsPressed,
-  // @ts-ignore: Ugh
   onWalletBalanceVisibilityChange,
 }) => {
   const [wallet, setWallet] = useState(initialWallet);
   const [allowOnchainAddress, setAllowOnchainAddress] = useState(false);
   const { preferredFiatCurrency } = useSettings();
 
-  const menuRef = useRef(null);
+  const menuRef = useRef<ToolTipMenuProps>(null);
 
   const verifyIfWalletAllowsOnchainAddress = useCallback(() => {
     if (wallet.type === LightningCustodianWallet.type) {
@@ -85,8 +81,9 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
   };
 
   const changeWalletBalanceUnit = () => {
-    // @ts-ignore: Ugh
+    if (menuRef.current?.dismissMenu) {
-    menuRef.current?.dismissMenu();
+      menuRef.current.dismissMenu();
+    }
     let newWalletPreferredUnit = wallet.getPreferredBalanceUnit();
 
     if (newWalletPreferredUnit === BitcoinUnit.BTC) {
@@ -140,7 +137,6 @@ const TransactionsNavigationHeader: React.FC<TransactionsNavigationHeaderProps>
     <LinearGradient
       colors={WalletGradient.gradientsFor(wallet.type)}
       style={styles.lineaderGradient}
-      // @ts-ignore: Ugh
       {...WalletGradient.linearGradientProps(wallet.type)}
     >
       <Image

components/addresses/AddressItem.tsx

@@ -1,10 +1,9 @@
+import React, { useMemo, useRef } from 'react';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { useNavigation } from '@react-navigation/native';
-import React, { useMemo, useRef } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import Share from 'react-native-share';
-
 import triggerHapticFeedback, { HapticFeedbackTypes } from '../../blue_modules/hapticFeedback';
 import { useStorage } from '../../blue_modules/storage-context';
 import confirm from '../../helpers/confirm';
@@ -15,8 +14,10 @@ import presentAlert from '../Alert';
 import QRCodeComponent from '../QRCodeComponent';
 import { useTheme } from '../themes';
 import TooltipMenu from '../TooltipMenu';
-import { Action } from '../types';
+import { Action, ToolTipMenuProps } from '../types';
 import { AddressTypeBadge } from './AddressTypeBadge';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { DetailViewStackParamList } from '../../navigation/DetailViewStackParamList';
 
 interface AddressItemProps {
   // todo: fix `any` after addresses.js is converted to the church of holy typescript
@@ -26,6 +27,8 @@ interface AddressItemProps {
   allowSignVerifyMessage: boolean;
 }
 
+type NavigationProps = NativeStackNavigationProp<DetailViewStackParamList>;
+
 const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }: AddressItemProps) => {
   const { wallets } = useStorage();
   const { colors } = useTheme();
@@ -52,13 +55,18 @@ const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }: Ad
     },
   });
 
-  const { navigate } = useNavigation();
+  const { navigate } = useNavigation<NavigationProps>();
+
+  const menuRef = useRef<ToolTipMenuProps>();
+
+  const dismissMenu = () => {
+    if (menuRef.current?.dismissMenu) {
+      menuRef.current.dismissMenu();
+    }
+  };
 
-  const menuRef = useRef();
   const navigateToReceive = () => {
-    // @ts-ignore wtf
+    dismissMenu();
-    menuRef.current?.dismissMenu();
-    // @ts-ignore wtf
     navigate('ReceiveDetailsRoot', {
       screen: 'ReceiveDetails',
       params: {
@@ -69,9 +77,7 @@ const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }: Ad
   };
 
   const navigateToSignVerify = () => {
-    // @ts-ignore wtf
+    dismissMenu();
-    menuRef.current?.dismissMenu();
-    // @ts-ignore wtf
     navigate('SignVerifyRoot', {
       screen: 'SignVerify',
       params: {
@@ -114,13 +120,13 @@ const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }: Ad
   };
 
   const onToolTipPress = async (id: string) => {
-    if (id === AddressItem.actionKeys.CopyToClipboard) {
+    if (id === actionKeys.CopyToClipboard) {
       handleCopyPress();
-    } else if (id === AddressItem.actionKeys.Share) {
+    } else if (id === actionKeys.Share) {
       handleSharePress();
-    } else if (id === AddressItem.actionKeys.SignVerify) {
+    } else if (id === actionKeys.SignVerify) {
       navigateToSignVerify();
-    } else if (id === AddressItem.actionKeys.ExportPrivateKey) {
+    } else if (id === actionKeys.ExportPrivateKey) {
       if (await confirm(loc.addresses.sensitive_private_key)) {
         if (await isBiometricUseCapableAndEnabled()) {
           if (!(await unlockWithBiometrics())) {
@@ -171,14 +177,14 @@ const AddressItem = ({ item, balanceUnit, walletID, allowSignVerifyMessage }: Ad
   return render();
 };
 
-AddressItem.actionKeys = {
+const actionKeys = {
   Share: 'share',
   CopyToClipboard: 'copyToClipboard',
   SignVerify: 'signVerify',
   ExportPrivateKey: 'exportPrivateKey',
 };
 
-AddressItem.actionIcons = {
+const actionIcons = {
   Signature: {
     iconType: 'SYSTEM',
     iconValue: 'signature',
@@ -220,30 +226,30 @@ const styles = StyleSheet.create({
 const getAvailableActions = ({ allowSignVerifyMessage }: { allowSignVerifyMessage: boolean }): Action[] | Action[][] => {
   const actions = [
     {
-      id: AddressItem.actionKeys.CopyToClipboard,
+      id: actionKeys.CopyToClipboard,
       text: loc.transactions.details_copy,
-      icon: AddressItem.actionIcons.Clipboard,
+      icon: actionIcons.Clipboard,
     },
     {
-      id: AddressItem.actionKeys.Share,
+      id: actionKeys.Share,
       text: loc.receive.details_share,
-      icon: AddressItem.actionIcons.Share,
+      icon: actionIcons.Share,
     },
   ];
 
   if (allowSignVerifyMessage) {
     actions.push({
-      id: AddressItem.actionKeys.SignVerify,
+      id: actionKeys.SignVerify,
       text: loc.addresses.sign_title,
-      icon: AddressItem.actionIcons.Signature,
+      icon: actionIcons.Signature,
     });
   }
 
   if (allowSignVerifyMessage) {
     actions.push({
-      id: AddressItem.actionKeys.ExportPrivateKey,
+      id: actionKeys.ExportPrivateKey,
       text: loc.addresses.copy_private_key,
-      icon: AddressItem.actionIcons.ExportPrivateKey,
+      icon: actionIcons.ExportPrivateKey,
     });
   }
 

components/types.ts

@@ -16,6 +16,7 @@ export interface ToolTipMenuProps {
   actions: Action[] | Action[][];
   children: React.ReactNode;
   enableAndroidRipple?: boolean;
+  dismissMenu?: () => void;
   onPressMenuItem: (id: string) => void;
   title?: string;
   isMenuPrimaryAction?: boolean;

navigation/DetailViewScreensStack.tsx

@@ -359,19 +359,6 @@ const DetailViewStackScreensStack = () => {
           presentation: 'fullScreenModal',
           statusBarHidden: true,
         }}
-        initialParams={{
-          isLoading: false,
-          cameraStatusGranted: undefined,
-          backdoorPressed: undefined,
-          launchedBy: undefined,
-          urTotal: undefined,
-          urHave: undefined,
-          backdoorText: '',
-          onDismiss: undefined,
-          showFileImportButton: true,
-          backdoorVisible: false,
-          animatedQRCodeData: {},
-        }}
       />
 
       <DetailViewRoot.Screen name="PaymentCodeRoot" component={PaymentCodeStackRoot} options={NavigationDefaultOptions} />

navigation/DetailViewStackParamList.ts

@@ -1,3 +1,5 @@
+import { LightningTransaction } from '../class/wallets/types';
+
 export type DetailViewStackParamList = {
   WalletsList: undefined;
   WalletTransactions: { walletID: string; walletType: string };
@@ -11,21 +13,32 @@ export type DetailViewStackParamList = {
   RBFBumpFee: { transactionId: string };
   RBFCancel: { transactionId: string };
   SelectWallet: undefined;
-  LNDViewInvoice: { invoiceId: string };
+  LNDViewInvoice: { invoice: LightningTransaction; walletID: string };
   LNDViewAdditionalInvoiceInformation: { invoiceId: string };
   LNDViewAdditionalInvoicePreImage: { invoiceId: string };
   Broadcast: undefined;
   IsItMyAddress: undefined;
   GenerateWord: undefined;
   LnurlPay: undefined;
-  LnurlPaySuccess: undefined;
+  LnurlPaySuccess: {
+    paymentHash: string;
+    justPaid: boolean;
+    fromWalletID: string;
+  };
   LnurlAuth: undefined;
   Success: undefined;
   WalletAddresses: { walletID: string };
   AddWalletRoot: undefined;
   SendDetailsRoot: undefined;
   LNDCreateInvoiceRoot: undefined;
-  ScanLndInvoiceRoot: undefined;
+  ScanLndInvoiceRoot: {
+    screen: string;
+    params: {
+      paymentHash: string;
+      fromWalletID: string;
+      justPaid: boolean;
+    };
+  };
   AztecoRedeemRoot: undefined;
   WalletExportRoot: undefined;
   ExportMultisigCoordinationSetupRoot: undefined;
@@ -40,7 +53,9 @@ export type DetailViewStackParamList = {
   ElectrumSettings: undefined;
   EncryptStorage: undefined;
   Language: undefined;
-  LightningSettings: undefined;
+  LightningSettings: {
+    url?: string;
+  };
   NotificationSettings: undefined;
   SelfTest: undefined;
   ReleaseNotes: undefined;
@@ -48,20 +63,35 @@ export type DetailViewStackParamList = {
   SettingsPrivacy: undefined;
   ViewEditMultisigCosignersRoot: { walletID: string; cosigners: string[] };
   WalletXpubRoot: undefined;
-  SignVerifyRoot: undefined;
+  SignVerifyRoot: {
-  ReceiveDetailsRoot: undefined;
+    screen: 'SignVerify';
+    params: {
+      walletID: string;
+      address: string;
+    };
+  };
+  ReceiveDetailsRoot: {
+    screen: 'ReceiveDetails';
+    params: {
+      walletID: string;
+      address: string;
+    };
+  };
   ScanQRCodeRoot: {
-    isLoading?: boolean;
+    screen: string;
-    cameraStatusGranted?: boolean;
+    params: {
-    backdoorPressed?: boolean;
+      isLoading: false;
-    launchedBy?: string;
+      cameraStatusGranted?: boolean;
-    urTotal?: number;
+      backdoorPressed?: boolean;
-    urHave?: number;
+      launchedBy?: string;
-    backdoorText?: string;
+      urTotal?: number;
-    onDismiss?: () => void;
+      urHave?: number;
-    showFileImportButton?: boolean;
+      backdoorText?: string;
-    backdoorVisible?: boolean;
+      onDismiss?: () => void;
-    animatedQRCodeData?: Record<string, any>;
+      showFileImportButton: true;
+      backdoorVisible?: boolean;
+      animatedQRCodeData?: Record<string, any>;
+    };
   };
   PaymentCodeRoot: undefined;
   ReorderWallets: undefined;

screen/settings/lightningSettings.tsx

@@ -1,6 +1,6 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import React, { useCallback, useEffect, useState } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { RouteProp, useRoute } from '@react-navigation/native';
 import { Alert, I18nManager, Linking, ScrollView, StyleSheet, TextInput, View } from 'react-native';
 import { Button as ButtonRNElements } from 'react-native-elements';
 
@@ -11,7 +11,7 @@ import { LightningCustodianWallet } from '../../class/wallets/lightning-custodia
 import presentAlert from '../../components/Alert';
 import { Button } from '../../components/Button';
 import { useTheme } from '../../components/themes';
-import { requestCameraAuthorization } from '../../helpers/scan-qr';
+import { scanQrHelper } from '../../helpers/scan-qr';
 import loc from '../../loc';
 
 const styles = StyleSheet.create({
@@ -52,7 +52,6 @@ const LightningSettings: React.FC = () => {
   const [URI, setURI] = useState<string>();
   const { colors } = useTheme();
   const route = useRoute();
-  const navigation = useNavigation();
   const styleHook = StyleSheet.create({
     uri: {
       borderColor: colors.formBorder,
@@ -114,17 +113,11 @@ const LightningSettings: React.FC = () => {
   }, [URI]);
 
   const importScan = () => {
-    requestCameraAuthorization().then(() =>
+    scanQrHelper(route.name).then(data => {
-      // @ts-ignore: Address types later
+      if (data) {
-      navigation.navigate('ScanQRCodeRoot', {
+        setLndhubURI(data);
-        screen: 'ScanQRCode',
+      }
-        params: {
+    });
-          launchedBy: route.name,
-          onBarScanned: setLndhubURI,
-          showFileImportButton: true,
-        },
-      }),
-    );
   };
 
   return (

screen/transactions/details.tsx

@@ -1,5 +1,5 @@
 import Clipboard from '@react-native-clipboard/clipboard';
-import { RouteProp, useFocusEffect, useNavigation, useRoute } from '@react-navigation/native';
+import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import assert from 'assert';
 import dayjs from 'dayjs';
@@ -18,6 +18,8 @@ import navigationStyle from '../../components/navigationStyle';
 import { useTheme } from '../../components/themes';
 import ToolTipMenu from '../../components/TooltipMenu';
 import loc from '../../loc';
+import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
+import { DetailViewStackParamList } from '../../navigation/DetailViewStackParamList';
 
 interface TransactionDetailsProps {
   route: RouteProp<{ params: { hash: string; walletID: string } }, 'params'>;
@@ -62,8 +64,10 @@ const toolTipMenuActions = [
   },
 ];
 
+type NavigationProps = NativeStackNavigationProp<DetailViewStackParamList, 'TransactionDetails'>;
+
 const TransactionDetails = () => {
-  const { setOptions, navigate } = useNavigation();
+  const { setOptions, navigate } = useExtendedNavigation<NavigationProps>();
   const { hash, walletID } = useRoute<TransactionDetailsProps['route']>().params;
   const { saveToDisk, txMetadata, counterpartyMetadata, wallets, getTransactions } = useContext(BlueStorageContext);
   const [from, setFrom] = useState<string[]>([]);
@@ -204,7 +208,6 @@ const TransactionDetails = () => {
   };
 
   const navigateToWallet = (wallet: TWallet) => {
-    // @ts-ignore idk how to fix it
     navigate('WalletTransactions', {
       walletID: wallet.getID(),
       walletType: wallet.type,

screen/wallets/ViewEditMultisigCosigners.tsx

@@ -18,7 +18,7 @@ import {
 } from 'react-native';
 import { Badge, Icon } from 'react-native-elements';
 
-import { isDesktop } from '../../blue_modules/environment';
+import { isDesktop, isTablet } from '../../blue_modules/environment';
 import { useStorage } from '../../blue_modules/storage-context';
 import { encodeUR } from '../../blue_modules/ur';
 import {
@@ -191,7 +191,6 @@ const ViewEditMultisigCosigners: React.FC = () => {
       await wallet?.fetchBalance();
     }
     newWallets.push(wallet);
-    // @ts-ignore  wtf
     navigate('WalletsList');
     setTimeout(() => {
       setWalletsWithNewOrder(newWallets);
@@ -529,11 +528,9 @@ const ViewEditMultisigCosigners: React.FC = () => {
   };
 
   const renderProvideMnemonicsModal = () => {
-    // @ts-ignore weird, property exists on type definition. might be some ts bugs
-    const isPad: boolean = Platform.isPad;
     return (
       <BottomModal avoidKeyboard isVisible={isProvideMnemonicsModalVisible} onClose={hideProvideMnemonicsModal} coverScreen={false}>
-        <KeyboardAvoidingView enabled={!isPad} behavior={Platform.OS === 'ios' ? 'position' : 'padding'} keyboardVerticalOffset={120}>
+        <KeyboardAvoidingView enabled={!isTablet} behavior={Platform.OS === 'ios' ? 'position' : 'padding'} keyboardVerticalOffset={120}>
           <View style={[styles.modalContent, stylesHook.modalContent]}>
             <BlueTextCentered>{loc.multisig.type_your_mnemonics}</BlueTextCentered>
             <BlueSpacing20 />
@@ -561,12 +558,9 @@ const ViewEditMultisigCosigners: React.FC = () => {
   };
 
   const renderShareModal = () => {
-    // @ts-ignore weird, property exists on typedefinition. might be some ts bugs
-    const isPad: boolean = Platform.isPad;
-
     return (
       <BottomModal isVisible={isShareModalVisible} onClose={hideShareModal} doneButton coverScreen={false}>
-        <KeyboardAvoidingView enabled={!isPad} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
+        <KeyboardAvoidingView enabled={!isTablet} behavior={Platform.OS === 'ios' ? 'position' : undefined}>
           <View style={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}>
             <Text style={[styles.headerText, stylesHook.textDestination]}>
               {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
@@ -627,13 +621,11 @@ const ViewEditMultisigCosigners: React.FC = () => {
   };
 
   const footer = <Button disabled={vaultKeyData.isLoading || isSaveButtonDisabled} title={loc._.save} onPress={onSave} />;
-  // @ts-ignore weird, property exists on typedefinition. might be some ts bugs
-  const isPad: boolean = Platform.isPad;
 
   return (
     <View style={[styles.root, stylesHook.root]} ref={discardChangesRef}>
       <KeyboardAvoidingView
-        enabled={!isPad}
+        enabled={!isTablet}
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         keyboardVerticalOffset={62}
         style={[styles.mainBlock, styles.root]}