diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index e115d4f697b2..e4735e9d0020 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -79,7 +79,7 @@ type AddressSearchProps = {
     predefinedPlaces?: Place[] | null;
 
     /** A map of inputID key names */
-    renamedInputKeys: RenamedInputKeysProps;
+    renamedInputKeys?: RenamedInputKeysProps;
 
     /** Maximum number of characters allowed in search input */
     maxInputLength?: number;
diff --git a/src/languages/types.ts b/src/languages/types.ts
index 410c8e1c2085..bb56d5c38cd3 100644
--- a/src/languages/types.ts
+++ b/src/languages/types.ts
@@ -157,7 +157,7 @@ type EnterMagicCodeParams = {contactMethod: string};
 
 type TransferParams = {amount: string};
 
-type InstantSummaryParams = {rate: number; minAmount: number};
+type InstantSummaryParams = {rate: string; minAmount: string};
 
 type NotYouParams = {user: string};
 
diff --git a/src/libs/GetPhysicalCardUtils.ts b/src/libs/GetPhysicalCardUtils.ts
index 3f8a7d191f4b..48c537f0f14c 100644
--- a/src/libs/GetPhysicalCardUtils.ts
+++ b/src/libs/GetPhysicalCardUtils.ts
@@ -54,24 +54,20 @@ function setCurrentRoute(currentRoute: string, domain: string, privatePersonalDe
  * @param privatePersonalDetails
  * @returns
  */
-function getUpdatedDraftValues(
-    draftValues: OnyxEntry<GetPhysicalCardForm>,
-    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>,
-    loginList: OnyxEntry<LoginList>,
-): Partial<GetPhysicalCardForm> {
+function getUpdatedDraftValues(draftValues: OnyxEntry<GetPhysicalCardForm>, privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>, loginList: OnyxEntry<LoginList>): GetPhysicalCardForm {
     const {address, legalFirstName, legalLastName, phoneNumber} = privatePersonalDetails ?? {};
 
     return {
         /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
         // we do not need to use nullish coalescing here because we want to allow empty strings
-        legalFirstName: draftValues?.legalFirstName || legalFirstName,
-        legalLastName: draftValues?.legalLastName || legalLastName,
-        addressLine1: draftValues?.addressLine1 || address?.street.split('\n')[0],
+        legalFirstName: draftValues?.legalFirstName || legalFirstName || '',
+        legalLastName: draftValues?.legalLastName || legalLastName || '',
+        addressLine1: draftValues?.addressLine1 || address?.street.split('\n')[0] || '',
         addressLine2: draftValues?.addressLine2 || address?.street.split('\n')[1] || '',
-        city: draftValues?.city || address?.city,
-        country: draftValues?.country || address?.country,
+        city: draftValues?.city || address?.city || '',
+        country: draftValues?.country || address?.country || '',
         phoneNumber: draftValues?.phoneNumber || phoneNumber || UserUtils.getSecondaryPhoneLogin(loginList) || '',
-        state: draftValues?.state || address?.state,
+        state: draftValues?.state || address?.state || '',
         zipPostCode: draftValues?.zipPostCode || address?.zip || '',
         /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
     };
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index f02bb3bd2aca..765ab76fd638 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -502,6 +502,7 @@ type PublicScreensParamList = {
         shortLivedAuthToken?: string;
         shortLivedToken?: string;
         exitTo?: Routes | HybridAppRoute;
+        domain?: Routes;
     };
     [SCREENS.VALIDATE_LOGIN]: {
         accountID: string;
diff --git a/src/libs/actions/Card.ts b/src/libs/actions/Card.ts
index 2cc32616562d..756ef902d913 100644
--- a/src/libs/actions/Card.ts
+++ b/src/libs/actions/Card.ts
@@ -178,3 +178,4 @@ function revealVirtualCardDetails(cardID: number): Promise<Response> {
 }
 
 export {requestReplacementExpensifyCard, activatePhysicalExpensifyCard, clearCardListErrors, reportVirtualExpensifyCardFraud, revealVirtualCardDetails};
+export type {ReplacementReason};
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
similarity index 76%
rename from src/pages/settings/Wallet/ActivatePhysicalCardPage.js
rename to src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
index 24156a7c74fc..4edf637618ea 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.js
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
@@ -1,14 +1,14 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import BigNumberPad from '@components/BigNumberPad';
 import Button from '@components/Button';
 import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout';
 import LottieAnimations from '@components/LottieAnimations';
 import MagicCodeInput from '@components/MagicCodeInput';
+import type {MagicCodeInputHandle} from '@components/MagicCodeInput';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -19,32 +19,22 @@ import * as CardUtils from '@libs/CardUtils';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as CardSettings from '@userActions/Card';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
-import assignedCardPropTypes from './assignedCardPropTypes';
+import type {Card} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-const propTypes = {
-    /* Onyx Props */
-
-    /** The details about the Expensify cards */
-    cardList: PropTypes.objectOf(assignedCardPropTypes),
-
-    /** Navigation route context info provided by react navigation */
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            /** domain passed via route /settings/wallet/card/:domain */
-            domain: PropTypes.string,
-        }),
-    }).isRequired,
+type ActivatePhysicalCardPageOnyxProps = {
+    /** Card list propTypes */
+    cardList: OnyxEntry<Record<string, Card>>;
 };
 
-const defaultProps = {
-    cardList: {},
-};
+type ActivatePhysicalCardPageProps = ActivatePhysicalCardPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;
 
 const LAST_FOUR_DIGITS_LENGTH = 4;
 const MAGIC_INPUT_MIN_HEIGHT = 86;
@@ -52,9 +42,9 @@ const MAGIC_INPUT_MIN_HEIGHT = 86;
 function ActivatePhysicalCardPage({
     cardList,
     route: {
-        params: {domain},
+        params: {domain = ''},
     },
-}) {
+}: ActivatePhysicalCardPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isExtraSmallScreenHeight} = useWindowDimensions();
@@ -65,23 +55,24 @@ function ActivatePhysicalCardPage({
     const [lastFourDigits, setLastFourDigits] = useState('');
     const [lastPressedDigit, setLastPressedDigit] = useState('');
 
-    const domainCards = CardUtils.getDomainCards(cardList)[domain];
-    const physicalCard = _.find(domainCards, (card) => !card.isVirtual) || {};
-    const cardID = lodashGet(physicalCard, 'cardID', 0);
-    const cardError = ErrorUtils.getLatestErrorMessage(physicalCard);
+    const domainCards = CardUtils.getDomainCards(cardList)[domain] ?? [];
+    const physicalCard = domainCards.find((card) => !card.isVirtual);
+    const cardID = physicalCard?.cardID ?? 0;
+    const cardError = ErrorUtils.getLatestErrorMessage(physicalCard ?? {});
 
-    const activateCardCodeInputRef = useRef(null);
+    const activateCardCodeInputRef = useRef<MagicCodeInputHandle>(null);
 
     /**
      * If state of the card is CONST.EXPENSIFY_CARD.STATE.OPEN, navigate to card details screen.
      */
     useEffect(() => {
-        if (physicalCard.isLoading || lodashGet(cardList, `${cardID}.state`, 0) !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        if (physicalCard?.isLoading || cardList?.[cardID]?.state !== CONST.EXPENSIFY_CARD.STATE.OPEN) {
             return;
         }
 
         Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
-    }, [cardID, cardList, domain, physicalCard.isLoading]);
+    }, [cardID, cardList, domain, physicalCard?.isLoading]);
 
     useEffect(
         () => () => {
@@ -95,17 +86,13 @@ function ActivatePhysicalCardPage({
      *
      * NOTE: If the same digit is pressed twice in a row, append it to the end of the string
      * so that useEffect inside MagicCodeInput will be triggered by artificial change of the value.
-     *
-     * @param {String} key
      */
-    const updateLastPressedDigit = useCallback((key) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);
+    const updateLastPressedDigit = useCallback((key: string) => setLastPressedDigit(lastPressedDigit === key ? lastPressedDigit + key : key), [lastPressedDigit]);
 
     /**
      * Handle card activation code input
-     *
-     * @param {String} text
      */
-    const onCodeInput = (text) => {
+    const onCodeInput = (text: string) => {
         setFormError('');
 
         if (cardError) {
@@ -116,7 +103,7 @@ function ActivatePhysicalCardPage({
     };
 
     const submitAndNavigateToNextPage = useCallback(() => {
-        activateCardCodeInputRef.current.blur();
+        activateCardCodeInputRef.current?.blur();
 
         if (lastFourDigits.replace(CONST.MAGIC_CODE_EMPTY_CHAR, '').length !== LAST_FOUR_DIGITS_LENGTH) {
             setFormError('activateCardPage.error.thatDidntMatch');
@@ -126,7 +113,7 @@ function ActivatePhysicalCardPage({
         CardSettings.activatePhysicalExpensifyCard(lastFourDigits, cardID);
     }, [lastFourDigits, cardID]);
 
-    if (_.isEmpty(physicalCard)) {
+    if (isEmptyObject(physicalCard)) {
         return <NotFoundPage />;
     }
 
@@ -161,7 +148,7 @@ function ActivatePhysicalCardPage({
             <Button
                 success
                 isDisabled={isOffline}
-                isLoading={physicalCard.isLoading}
+                isLoading={physicalCard?.isLoading}
                 medium={isExtraSmallScreenHeight}
                 style={[styles.w100, styles.p5, styles.mtAuto]}
                 onPress={submitAndNavigateToNextPage}
@@ -172,11 +159,9 @@ function ActivatePhysicalCardPage({
     );
 }
 
-ActivatePhysicalCardPage.propTypes = propTypes;
-ActivatePhysicalCardPage.defaultProps = defaultProps;
 ActivatePhysicalCardPage.displayName = 'ActivatePhysicalCardPage';
 
-export default withOnyx({
+export default withOnyx<ActivatePhysicalCardPageProps, ActivatePhysicalCardPageOnyxProps>({
     cardList: {
         key: ONYXKEYS.CARD_LIST,
     },
diff --git a/src/pages/settings/Wallet/AddDebitCardPage.js b/src/pages/settings/Wallet/AddDebitCardPage.tsx
similarity index 85%
rename from src/pages/settings/Wallet/AddDebitCardPage.js
rename to src/pages/settings/Wallet/AddDebitCardPage.tsx
index eb8eb0c88162..b784a5709ca7 100644
--- a/src/pages/settings/Wallet/AddDebitCardPage.js
+++ b/src/pages/settings/Wallet/AddDebitCardPage.tsx
@@ -1,12 +1,14 @@
-import PropTypes from 'prop-types';
 import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import AddressSearch from '@components/AddressSearch';
 import CheckboxWithLabel from '@components/CheckboxWithLabel';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import ScreenWrapper from '@components/ScreenWrapper';
 import StatePicker from '@components/StatePicker';
 import Text from '@components/Text';
@@ -20,26 +22,31 @@ import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {AddDebitCardForm} from '@src/types/form';
 import INPUT_IDS from '@src/types/form/AddDebitCardForm';
 
-const propTypes = {
-    /* Onyx Props */
-    formData: PropTypes.shape({
-        setupComplete: PropTypes.bool,
-    }),
+type DebitCardPageOnyxProps = {
+    /** Form data propTypes */
+    formData: OnyxEntry<AddDebitCardForm>;
 };
 
-const defaultProps = {
-    formData: {
-        setupComplete: false,
-    },
-};
+type DebitCardPageProps = DebitCardPageOnyxProps;
+
+const REQUIRED_FIELDS = [
+    INPUT_IDS.NAME_ON_CARD,
+    INPUT_IDS.CARD_NUMBER,
+    INPUT_IDS.EXPIRATION_DATE,
+    INPUT_IDS.SECURITY_CODE,
+    INPUT_IDS.ADDRESS_STREET,
+    INPUT_IDS.ADDRESS_ZIP_CODE,
+    INPUT_IDS.ADDRESS_STATE,
+];
 
-function DebitCardPage(props) {
+function DebitCardPage({formData}: DebitCardPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const prevFormDataSetupComplete = usePrevious(props.formData.setupComplete);
-    const nameOnCardRef = useRef(null);
+    const prevFormDataSetupComplete = usePrevious(!!formData?.setupComplete);
+    const nameOnCardRef = useRef<AnimatedTextInputRef>(null);
 
     /**
      * Reset the form values on the mount and unmount so that old errors don't show when this form is displayed again.
@@ -53,20 +60,18 @@ function DebitCardPage(props) {
     }, []);
 
     useEffect(() => {
-        if (prevFormDataSetupComplete || !props.formData.setupComplete) {
+        if (prevFormDataSetupComplete || !formData?.setupComplete) {
             return;
         }
 
         PaymentMethods.continueSetup();
-    }, [prevFormDataSetupComplete, props.formData.setupComplete]);
+    }, [prevFormDataSetupComplete, formData?.setupComplete]);
 
     /**
-     * @param {Object} values - form input values passed by the Form component
-     * @returns {Boolean}
+     * @param values - form input values passed by the Form component
      */
-    const validate = (values) => {
-        const requiredFields = ['nameOnCard', 'cardNumber', 'expirationDate', 'securityCode', 'addressStreet', 'addressZipCode', 'addressState'];
-        const errors = ValidationUtils.getFieldRequiredErrors(values, requiredFields);
+    const validate = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM>): FormInputErrors<typeof ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM> => {
+        const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
 
         if (values.nameOnCard && !ValidationUtils.isValidLegalName(values.nameOnCard)) {
             errors.nameOnCard = 'addDebitCardPage.error.invalidName';
@@ -101,7 +106,7 @@ function DebitCardPage(props) {
 
     return (
         <ScreenWrapper
-            onEntryTransitionEnd={() => nameOnCardRef.current && nameOnCardRef.current.focus()}
+            onEntryTransitionEnd={() => nameOnCardRef.current?.focus()}
             includeSafeAreaPaddingBottom={false}
             testID={DebitCardPage.displayName}
         >
@@ -206,11 +211,9 @@ function DebitCardPage(props) {
     );
 }
 
-DebitCardPage.propTypes = propTypes;
-DebitCardPage.defaultProps = defaultProps;
 DebitCardPage.displayName = 'DebitCardPage';
 
-export default withOnyx({
+export default withOnyx<DebitCardPageProps, DebitCardPageOnyxProps>({
     formData: {
         key: ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM,
     },
diff --git a/src/pages/settings/Wallet/ChooseTransferAccountPage.js b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
similarity index 52%
rename from src/pages/settings/Wallet/ChooseTransferAccountPage.js
rename to src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
index ec7fd4ce55b5..93caaf1c05f9 100644
--- a/src/pages/settings/Wallet/ChooseTransferAccountPage.js
+++ b/src/pages/settings/Wallet/ChooseTransferAccountPage.tsx
@@ -1,51 +1,49 @@
 import React from 'react';
+import type {GestureResponderEvent} from 'react-native';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
 import ScreenWrapper from '@components/ScreenWrapper';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as BankAccounts from '@userActions/BankAccounts';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {AccountData, WalletTransfer} from '@src/types/onyx';
 import PaymentMethodList from './PaymentMethodList';
-import walletTransferPropTypes from './walletTransferPropTypes';
 
-const propTypes = {
+type ChooseTransferAccountPageOnyxProps = {
     /** Wallet transfer propTypes */
-    walletTransfer: walletTransferPropTypes,
-
-    ...withLocalizePropTypes,
+    walletTransfer: OnyxEntry<WalletTransfer>;
 };
 
-const defaultProps = {
-    walletTransfer: {},
-};
+type ChooseTransferAccountPageProps = ChooseTransferAccountPageOnyxProps;
 
-function ChooseTransferAccountPage(props) {
+function ChooseTransferAccountPage({walletTransfer = {}}: ChooseTransferAccountPageProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
     /**
      * Go back to transfer balance screen with the selected bank account set
-     * @param {Object} event Click event object
-     * @param {String} accountType of the selected account type
-     * @param {Object} account of the selected account data
+     * @param event Click event object
+     * @param accountType of the selected account type
+     * @param account of the selected account data
      */
-    const selectAccountAndNavigateBack = (event, accountType, account) => {
-        PaymentMethods.saveWalletTransferAccountTypeAndID(accountType, accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ? account.bankAccountID : account.fundID);
+    const selectAccountAndNavigateBack = (event?: GestureResponderEvent | KeyboardEvent, accountType?: string, account?: AccountData) => {
+        PaymentMethods.saveWalletTransferAccountTypeAndID(
+            accountType ?? '',
+            (accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ? account?.bankAccountID?.toString() : account?.fundID?.toString()) ?? '',
+        );
         Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE);
     };
 
-    /**
-     * @param {String} paymentType
-     */
     const navigateToAddPaymentMethodPage = () => {
-        if (props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
+        if (walletTransfer?.filterPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
             Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD);
             return;
         }
@@ -55,24 +53,24 @@ function ChooseTransferAccountPage(props) {
     return (
         <ScreenWrapper testID={ChooseTransferAccountPage.displayName}>
             <HeaderWithBackButton
-                title={props.translate('chooseTransferAccountPage.chooseAccount')}
+                title={translate('chooseTransferAccountPage.chooseAccount')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_TRANSFER_BALANCE)}
             />
             <View style={[styles.mt3, styles.flexShrink1, styles.flexBasisAuto]}>
                 <PaymentMethodList
                     onPress={selectAccountAndNavigateBack}
                     shouldShowSelectedState
-                    filterType={props.walletTransfer.filterPaymentMethodType}
-                    selectedMethodID={props.walletTransfer.selectedAccountID}
+                    filterType={walletTransfer?.filterPaymentMethodType}
+                    selectedMethodID={walletTransfer?.selectedAccountID}
                     shouldShowAddPaymentMethodButton={false}
                 />
             </View>
             <MenuItem
                 onPress={navigateToAddPaymentMethodPage}
                 title={
-                    props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT
-                        ? props.translate('paymentMethodList.addNewBankAccount')
-                        : props.translate('paymentMethodList.addNewDebitCard')
+                    walletTransfer?.filterPaymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT
+                        ? translate('paymentMethodList.addNewBankAccount')
+                        : translate('paymentMethodList.addNewDebitCard')
                 }
                 icon={Expensicons.Plus}
             />
@@ -80,15 +78,10 @@ function ChooseTransferAccountPage(props) {
     );
 }
 
-ChooseTransferAccountPage.propTypes = propTypes;
-ChooseTransferAccountPage.defaultProps = defaultProps;
 ChooseTransferAccountPage.displayName = 'ChooseTransferAccountPage';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        walletTransfer: {
-            key: ONYXKEYS.WALLET_TRANSFER,
-        },
-    }),
-)(ChooseTransferAccountPage);
+export default withOnyx<ChooseTransferAccountPageProps, ChooseTransferAccountPageOnyxProps>({
+    walletTransfer: {
+        key: ONYXKEYS.WALLET_TRANSFER,
+    },
+})(ChooseTransferAccountPage);
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.js b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
similarity index 72%
rename from src/pages/settings/Wallet/ExpensifyCardPage.js
rename to src/pages/settings/Wallet/ExpensifyCardPage.tsx
index 4ff59ad1f9a1..a8b676f6c379 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.js
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useMemo, useState} from 'react';
 import {ScrollView, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import Button from '@components/Button';
 import CardPreview from '@components/CardPreview';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
@@ -18,80 +18,37 @@ import * as FormActions from '@libs/actions/FormActions';
 import * as CardUtils from '@libs/CardUtils';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as GetPhysicalCardUtils from '@libs/GetPhysicalCardUtils';
-import {translatableTextPropTypes} from '@libs/Localize';
 import Navigation from '@libs/Navigation/Navigation';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as Card from '@userActions/Card';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import assignedCardPropTypes from './assignedCardPropTypes';
+import type SCREENS from '@src/SCREENS';
+import type {GetPhysicalCardForm} from '@src/types/form';
+import type {LoginList, Card as OnyxCard, PrivatePersonalDetails} from '@src/types/onyx';
+import type {TCardDetails} from '@src/types/onyx/Card';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import RedDotCardSection from './RedDotCardSection';
 import CardDetails from './WalletPage/CardDetails';
 
-const propTypes = {
-    /* Onyx Props */
-    /** The details about the Expensify cards */
-    cardList: PropTypes.objectOf(assignedCardPropTypes),
-    /** Draft values used by the get physical card form */
-    draftValues: PropTypes.shape({
-        addressLine1: PropTypes.string,
-        addressLine2: PropTypes.string,
-        city: PropTypes.string,
-        state: PropTypes.string,
-        country: PropTypes.string,
-        zipPostCode: PropTypes.string,
-        phoneNumber: PropTypes.string,
-        legalFirstName: PropTypes.string,
-        legalLastName: PropTypes.string,
-    }),
-    loginList: PropTypes.shape({
-        /** The partner creating the account. It depends on the source: website, mobile, integrations, ... */
-        partnerName: PropTypes.string,
-
-        /** Phone/Email associated with user */
-        partnerUserID: PropTypes.string,
-
-        /** The date when the login was validated, used to show the brickroad status */
-        validatedDate: PropTypes.string,
+type ExpensifyCardPageOnyxProps = {
+    /** User's private personal details */
+    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
 
-        /** Field-specific server side errors keyed by microtime */
-        errorFields: PropTypes.objectOf(PropTypes.objectOf(translatableTextPropTypes)),
+    /** The details about the Expensify cards */
+    cardList: OnyxEntry<Record<string, OnyxCard>>;
 
-        /** Field-specific pending states for offline UI status */
-        pendingFields: PropTypes.objectOf(PropTypes.objectOf(PropTypes.string)),
-    }),
-    /** User's private personal details */
-    privatePersonalDetails: PropTypes.shape({
-        legalFirstName: PropTypes.string,
-        legalLastName: PropTypes.string,
-        phoneNumber: PropTypes.string,
-        /** User's home address */
-        address: PropTypes.shape({
-            street: PropTypes.string,
-            city: PropTypes.string,
-            state: PropTypes.string,
-            zip: PropTypes.string,
-            country: PropTypes.string,
-        }),
-    }),
+    /** Draft values used by the get physical card form */
+    draftValues: OnyxEntry<GetPhysicalCardForm>;
 
-    /** Navigation route context info provided by react navigation */
-    route: PropTypes.shape({
-        params: PropTypes.shape({
-            /** domain passed via route /settings/wallet/card/:domain */
-            domain: PropTypes.string,
-        }),
-    }).isRequired,
+    /** Login info */
+    loginList: OnyxEntry<LoginList>;
 };
 
-const defaultProps = {
-    cardList: null,
-    draftValues: null,
-    loginList: null,
-    privatePersonalDetails: null,
-};
+type ExpensifyCardPageProps = ExpensifyCardPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;
 
 function ExpensifyCardPage({
     cardList,
@@ -99,29 +56,30 @@ function ExpensifyCardPage({
     privatePersonalDetails,
     loginList,
     route: {
-        params: {domain},
+        params: {domain = ''},
     },
-}) {
+}: ExpensifyCardPageProps) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const domainCards = useMemo(() => cardList && CardUtils.getDomainCards(cardList)[domain], [cardList, domain]);
-    const virtualCard = useMemo(() => (domainCards && _.find(domainCards, (card) => card.isVirtual)) || {}, [domainCards]);
-    const physicalCard = useMemo(() => (domainCards && _.find(domainCards, (card) => !card.isVirtual)) || {}, [domainCards]);
+    const virtualCard = useMemo(() => domainCards?.find((card) => card.isVirtual), [domainCards]);
+    const physicalCard = useMemo(() => domainCards?.find((card) => !card.isVirtual), [domainCards]);
 
     const [isLoading, setIsLoading] = useState(false);
     const [isNotFound, setIsNotFound] = useState(false);
-    const [details, setDetails] = useState({});
+    const [details, setDetails] = useState<TCardDetails>();
     const [cardDetailsError, setCardDetailsError] = useState('');
 
     useEffect(() => {
         if (!cardList) {
             return;
         }
-        setIsNotFound(_.isEmpty(virtualCard) && _.isEmpty(physicalCard));
+        setIsNotFound(isEmptyObject(virtualCard) && isEmptyObject(physicalCard));
     }, [cardList, physicalCard, virtualCard]);
 
-    const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(physicalCard.availableSpend || virtualCard.availableSpend || 0);
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- availableSpend can be 0
+    const formattedAvailableSpendAmount = CurrencyUtils.convertToDisplayString(physicalCard?.availableSpend || virtualCard?.availableSpend || 0);
 
     const handleRevealDetails = () => {
         setIsLoading(true);
@@ -129,9 +87,9 @@ function ExpensifyCardPage({
         // That is why this action is handled manually and the response is stored in a local state
         // Hence eslint disable here.
         // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
-        Card.revealVirtualCardDetails(virtualCard.cardID)
+        Card.revealVirtualCardDetails(virtualCard?.cardID ?? 0)
             .then((value) => {
-                setDetails(value);
+                setDetails(value as TCardDetails);
                 setCardDetailsError('');
             })
             .catch(setCardDetailsError)
@@ -140,7 +98,6 @@ function ExpensifyCardPage({
 
     const goToGetPhysicalCardFlow = () => {
         let updatedDraftValues = draftValues;
-
         if (!draftValues) {
             updatedDraftValues = GetPhysicalCardUtils.getUpdatedDraftValues(null, privatePersonalDetails, loginList);
             // Form draft data needs to be initialized with the private personal details
@@ -151,9 +108,8 @@ function ExpensifyCardPage({
         GetPhysicalCardUtils.goToNextPhysicalCardRoute(domain, GetPhysicalCardUtils.getUpdatedPrivatePersonalDetails(updatedDraftValues));
     };
 
-    const hasDetectedDomainFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN);
-    const hasDetectedIndividualFraud = _.some(domainCards, (card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL);
-    const cardDetailsErrorObject = cardDetailsError ? {error: cardDetailsError} : {};
+    const hasDetectedDomainFraud = domainCards?.some((card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.DOMAIN);
+    const hasDetectedIndividualFraud = domainCards?.some((card) => card.fraud === CONST.EXPENSIFY_CARD.FRAUD_TYPES.INDIVIDUAL);
 
     if (isNotFound) {
         return <NotFoundPage onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} />;
@@ -175,16 +131,16 @@ function ExpensifyCardPage({
                             <CardPreview />
                         </View>
 
-                        {hasDetectedDomainFraud ? (
+                        {hasDetectedDomainFraud && (
                             <DotIndicatorMessage
                                 style={styles.pageWrapper}
                                 textStyles={styles.walletLockedMessage}
-                                messages={{0: 'cardPage.cardLocked'}}
+                                messages={{error: 'cardPage.cardLocked'}}
                                 type="error"
                             />
-                        ) : null}
+                        )}
 
-                        {hasDetectedIndividualFraud && !hasDetectedDomainFraud ? (
+                        {hasDetectedIndividualFraud && !hasDetectedDomainFraud && (
                             <>
                                 <RedDotCardSection
                                     title={translate('cardPage.suspiciousBannerTitle')}
@@ -198,9 +154,9 @@ function ExpensifyCardPage({
                                     onPress={() => Link.openOldDotLink(CONST.OLDDOT_URLS.INBOX)}
                                 />
                             </>
-                        ) : null}
+                        )}
 
-                        {!hasDetectedDomainFraud ? (
+                        {!hasDetectedDomainFraud && (
                             <>
                                 <MenuItemWithTopDescription
                                     description={translate('cardPage.availableSpend')}
@@ -208,14 +164,13 @@ function ExpensifyCardPage({
                                     interactive={false}
                                     titleStyle={styles.newKansasLarge}
                                 />
-                                {!_.isEmpty(virtualCard) && (
+                                {!isEmptyObject(virtualCard) && (
                                     <>
-                                        {details.pan ? (
+                                        {details?.pan ? (
                                             <CardDetails
                                                 pan={details.pan}
                                                 expiration={CardUtils.formatCardExpiration(details.expiration)}
                                                 cvv={details.cvv}
-                                                privatePersonalDetails={{address: details.address}}
                                                 domain={domain}
                                             />
                                         ) : (
@@ -237,7 +192,7 @@ function ExpensifyCardPage({
                                                     }
                                                 />
                                                 <DotIndicatorMessage
-                                                    messages={cardDetailsErrorObject}
+                                                    messages={cardDetailsError ? {error: cardDetailsError} : {}}
                                                     type="error"
                                                     style={[styles.ph5]}
                                                 />
@@ -252,11 +207,11 @@ function ExpensifyCardPage({
                                         />
                                     </>
                                 )}
-                                {physicalCard.state === CONST.EXPENSIFY_CARD.STATE.OPEN && (
+                                {physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.OPEN && (
                                     <>
                                         <MenuItemWithTopDescription
                                             description={translate('cardPage.physicalCardNumber')}
-                                            title={CardUtils.maskCard(physicalCard.lastFourPAN)}
+                                            title={CardUtils.maskCard(physicalCard?.lastFourPAN)}
                                             interactive={false}
                                             titleStyle={styles.walletCardNumber}
                                         />
@@ -269,9 +224,9 @@ function ExpensifyCardPage({
                                     </>
                                 )}
                             </>
-                        ) : null}
+                        )}
                     </ScrollView>
-                    {physicalCard.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
+                    {physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
                         <Button
                             success
                             style={[styles.w100, styles.p5]}
@@ -279,7 +234,7 @@ function ExpensifyCardPage({
                             text={translate('activateCardPage.activatePhysicalCard')}
                         />
                     )}
-                    {physicalCard.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED && (
+                    {physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED && (
                         <Button
                             success
                             text={translate('cardPage.getPhysicalCard')}
@@ -294,11 +249,9 @@ function ExpensifyCardPage({
     );
 }
 
-ExpensifyCardPage.propTypes = propTypes;
-ExpensifyCardPage.defaultProps = defaultProps;
 ExpensifyCardPage.displayName = 'ExpensifyCardPage';
 
-export default withOnyx({
+export default withOnyx<ExpensifyCardPageProps, ExpensifyCardPageOnyxProps>({
     cardList: {
         key: ONYXKEYS.CARD_LIST,
     },
diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx
index bea7789256c9..9193074f96c8 100644
--- a/src/pages/settings/Wallet/PaymentMethodList.tsx
+++ b/src/pages/settings/Wallet/PaymentMethodList.tsx
@@ -7,7 +7,7 @@ import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg/lib/typescript/ReactNativeSVG';
-import type {TupleToUnion, ValueOf} from 'type-fest';
+import type {ValueOf} from 'type-fest';
 import type {RenderSuggestionMenuItemProps} from '@components/AutoCompleteSuggestions/types';
 import Button from '@components/Button';
 import FormAlertWrapper from '@components/FormAlertWrapper';
@@ -34,11 +34,10 @@ import type {AccountData, BankAccountList, CardList, FundList} from '@src/types/
 import type {BankIcon} from '@src/types/onyx/Bank';
 import type {Errors} from '@src/types/onyx/OnyxCommon';
 import type PaymentMethod from '@src/types/onyx/PaymentMethod';
+import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-const FILTER_TYPES = [CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, ''] as const;
-
 type PaymentMethodListOnyxProps = {
     /** List of bank accounts */
     bankAccountList: OnyxEntry<BankAccountList>;
@@ -81,8 +80,11 @@ type PaymentMethodListProps = PaymentMethodListOnyxProps & {
     /** List container style */
     style?: StyleProp<ViewStyle>;
 
+    /** List item style */
+    listItemStyle?: StyleProp<ViewStyle>;
+
     /** Type to filter the payment Method list */
-    filterType?: TupleToUnion<typeof FILTER_TYPES>;
+    filterType?: FilterMethodPaymentType;
 
     /** Whether the add bank account button should be shown on the list */
     shouldShowAddBankAccount?: boolean;
@@ -98,9 +100,6 @@ type PaymentMethodListProps = PaymentMethodListOnyxProps & {
 
     /** What to do when a menu item is pressed */
     onPress: (event?: GestureResponderEvent | KeyboardEvent, accountType?: string, accountData?: AccountData, icon?: IconAsset, isDefault?: boolean, methodID?: number) => void;
-
-    /** List item style */
-    listItemStyle: StyleProp<ViewStyle>;
 };
 
 type PaymentMethodItem = PaymentMethod & {
@@ -303,7 +302,7 @@ function PaymentMethodList({
                     hoverAndPressStyle={styles.hoveredComponentBG}
                     shouldShowRightIcon={item.shouldShowRightIcon}
                     shouldShowSelectedState={shouldShowSelectedState}
-                    isSelected={selectedMethodID === item.methodID}
+                    isSelected={selectedMethodID.toString() === item.methodID?.toString()}
                     interactive={item.interactive}
                     brickRoadIndicator={item.brickRoadIndicator}
                     success={item.isMethodActive}
diff --git a/src/pages/settings/Wallet/RedDotCardSection.js b/src/pages/settings/Wallet/RedDotCardSection.tsx
similarity index 76%
rename from src/pages/settings/Wallet/RedDotCardSection.js
rename to src/pages/settings/Wallet/RedDotCardSection.tsx
index 7025cf7bf1a2..29acf7489fc7 100644
--- a/src/pages/settings/Wallet/RedDotCardSection.js
+++ b/src/pages/settings/Wallet/RedDotCardSection.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -7,12 +6,12 @@ import Text from '@components/Text';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 
-const propTypes = {
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
+type RedDotCardSectionProps = {
+    title: string;
+    description: string;
 };
 
-function RedDotCardSection({title, description}) {
+function RedDotCardSection({title, description}: RedDotCardSectionProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
 
@@ -27,14 +26,13 @@ function RedDotCardSection({title, description}) {
             <View style={[styles.flexRow, styles.flexShrink1]}>
                 <View style={styles.flexShrink1}>
                     <Text style={[styles.walletRedDotSectionTitle, styles.mb1]}>{title}</Text>
-                    <Text styles={styles.walletRedDotSectionText}>{description}</Text>
+                    <Text style={styles.walletRedDotSectionText}>{description}</Text>
                 </View>
             </View>
         </View>
     );
 }
 
-RedDotCardSection.propTypes = propTypes;
 RedDotCardSection.displayName = 'RedDotCardSection';
 
 export default RedDotCardSection;
diff --git a/src/pages/settings/Wallet/ReportCardLostPage.js b/src/pages/settings/Wallet/ReportCardLostPage.tsx
similarity index 76%
rename from src/pages/settings/Wallet/ReportCardLostPage.js
rename to src/pages/settings/Wallet/ReportCardLostPage.tsx
index b78c0b6bdc21..f53ebfb65e3f 100644
--- a/src/pages/settings/Wallet/ReportCardLostPage.js
+++ b/src/pages/settings/Wallet/ReportCardLostPage.tsx
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -15,21 +15,32 @@ import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
+import type {ReplacementReason} from '@userActions/Card';
 import * as CardActions from '@userActions/Card';
 import * as FormActions from '@userActions/FormActions';
+import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import assignedCardPropTypes from './assignedCardPropTypes';
+import type SCREENS from '@src/SCREENS';
+import type {ReportPhysicalCardForm} from '@src/types/form';
+import type {Card, PrivatePersonalDetails} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 const OPTIONS_KEYS = {
     DAMAGED: 'damaged',
     STOLEN: 'stolen',
 };
 
+type Option = {
+    key: string;
+    label: TranslationPaths;
+};
+
 /** Options for reason selector */
-const OPTIONS = [
+const OPTIONS: Option[] = [
     {
         key: OPTIONS_KEYS.DAMAGED,
         label: 'reportCardLostOrDamaged.cardDamaged',
@@ -40,36 +51,21 @@ const OPTIONS = [
     },
 ];
 
-const propTypes = {
+type ReportCardLostPageOnyxProps = {
     /** Onyx form data */
-    formData: PropTypes.shape({
-        isLoading: PropTypes.bool,
-    }),
+    formData: OnyxEntry<ReportPhysicalCardForm>;
+
     /** User's private personal details */
-    privatePersonalDetails: PropTypes.shape({
-        /** User's home address */
-        address: PropTypes.shape({
-            street: PropTypes.string,
-            city: PropTypes.string,
-            state: PropTypes.string,
-            zip: PropTypes.string,
-            country: PropTypes.string,
-        }),
-    }),
+    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
+
     /** User's cards list */
-    cardList: PropTypes.objectOf(assignedCardPropTypes),
-    route: PropTypes.shape({
-        /** Each parameter passed via the URL */
-        params: PropTypes.shape({
-            /** Domain string */
-            domain: PropTypes.string,
-        }),
-    }).isRequired,
+    cardList: OnyxEntry<Record<string, Card>>;
 };
 
-const defaultProps = {
-    formData: {},
-    privatePersonalDetails: {
+type ReportCardLostPageProps = ReportCardLostPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;
+
+function ReportCardLostPage({
+    privatePersonalDetails = {
         address: {
             street: '',
             street2: '',
@@ -79,51 +75,46 @@ const defaultProps = {
             country: '',
         },
     },
-    cardList: {},
-};
-
-function ReportCardLostPage({
-    privatePersonalDetails,
-    cardList,
+    cardList = {},
     route: {
-        params: {domain},
+        params: {domain = ''},
     },
     formData,
-}) {
+}: ReportCardLostPageProps) {
     const styles = useThemeStyles();
     usePrivatePersonalDetails();
 
-    const domainCards = CardUtils.getDomainCards(cardList)[domain];
+    const domainCards = CardUtils.getDomainCards(cardList ?? {})[domain];
     const physicalCard = CardUtils.findPhysicalCard(domainCards);
 
     const {translate} = useLocalize();
 
-    const [reason, setReason] = useState();
+    const [reason, setReason] = useState<Option>();
     const [isReasonConfirmed, setIsReasonConfirmed] = useState(false);
     const [shouldShowAddressError, setShouldShowAddressError] = useState(false);
     const [shouldShowReasonError, setShouldShowReasonError] = useState(false);
 
-    const prevIsLoading = usePrevious(formData.isLoading);
+    const prevIsLoading = usePrevious(formData?.isLoading);
 
-    const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails);
+    const formattedAddress = PersonalDetailsUtils.getFormattedAddress(privatePersonalDetails ?? {});
 
     useEffect(() => {
-        if (!_.isEmpty(physicalCard.errors) || !(prevIsLoading && !formData.isLoading)) {
+        if (!isEmptyObject(physicalCard?.errors) || !(prevIsLoading && !formData?.isLoading)) {
             return;
         }
 
         Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
-    }, [domain, formData.isLoading, prevIsLoading, physicalCard.errors]);
+    }, [domain, formData?.isLoading, prevIsLoading, physicalCard?.errors]);
 
     useEffect(() => {
-        if (formData.isLoading && _.isEmpty(physicalCard.errors)) {
+        if (formData?.isLoading && isEmptyObject(physicalCard?.errors)) {
             return;
         }
 
-        FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard.errors);
-    }, [formData.isLoading, physicalCard.errors]);
+        FormActions.setErrors(ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM, physicalCard?.errors ?? {});
+    }, [formData?.isLoading, physicalCard?.errors]);
 
-    if (_.isEmpty(physicalCard)) {
+    if (isEmptyObject(physicalCard)) {
         return <NotFoundPage />;
     }
 
@@ -144,10 +135,10 @@ function ReportCardLostPage({
             return;
         }
 
-        CardActions.requestReplacementExpensifyCard(physicalCard.cardID, reason);
+        CardActions.requestReplacementExpensifyCard(physicalCard.cardID, reason?.key as ReplacementReason);
     };
 
-    const handleOptionSelect = (option) => {
+    const handleOptionSelect = (option: Option) => {
         setReason(option);
         setShouldShowReasonError(false);
     };
@@ -161,7 +152,7 @@ function ReportCardLostPage({
         Navigation.goBack(ROUTES.SETTINGS_WALLET);
     };
 
-    const isDamaged = reason && reason.key === OPTIONS_KEYS.DAMAGED;
+    const isDamaged = reason?.key === OPTIONS_KEYS.DAMAGED;
 
     return (
         <ScreenWrapper
@@ -178,11 +169,10 @@ function ReportCardLostPage({
                         <View>
                             <Text style={[styles.textHeadline, styles.mb3, styles.mh5]}>{translate('reportCardLostOrDamaged.confirmAddressTitle')}</Text>
                             <MenuItemWithTopDescription
-                                inputID="address"
                                 title={formattedAddress}
                                 description={translate('reportCardLostOrDamaged.address')}
                                 shouldShowRightIcon
-                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS)}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_ADDRESS)}
                                 numberOfLinesTitle={2}
                             />
                             {isDamaged ? (
@@ -195,7 +185,7 @@ function ReportCardLostPage({
                             isAlertVisible={shouldShowAddressError}
                             onSubmit={handleSubmitSecondStep}
                             message="reportCardLostOrDamaged.addressError"
-                            isLoading={formData.isLoading}
+                            isLoading={formData?.isLoading}
                             buttonText={isDamaged ? translate('reportCardLostOrDamaged.shipNewCardButton') : translate('reportCardLostOrDamaged.deactivateCardButton')}
                         />
                     </>
@@ -205,7 +195,7 @@ function ReportCardLostPage({
                             <Text style={[styles.textHeadline, styles.mr5]}>{translate('reportCardLostOrDamaged.reasonTitle')}</Text>
                             <SingleOptionSelector
                                 options={OPTIONS}
-                                selectedOptionKey={reason && reason.key}
+                                selectedOptionKey={reason?.key}
                                 onSelectOption={handleOptionSelect}
                             />
                         </View>
@@ -222,11 +212,9 @@ function ReportCardLostPage({
     );
 }
 
-ReportCardLostPage.propTypes = propTypes;
-ReportCardLostPage.defaultProps = defaultProps;
 ReportCardLostPage.displayName = 'ReportCardLostPage';
 
-export default withOnyx({
+export default withOnyx<ReportCardLostPageProps, ReportCardLostPageOnyxProps>({
     privatePersonalDetails: {
         key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
     },
diff --git a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx
similarity index 61%
rename from src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
rename to src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx
index fa88e01d8b41..40a3eacb4ed9 100644
--- a/src/pages/settings/Wallet/ReportVirtualCardFraudPage.js
+++ b/src/pages/settings/Wallet/ReportVirtualCardFraudPage.tsx
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -13,61 +13,54 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {PublicScreensParamList} from '@libs/Navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as Card from '@userActions/Card';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import assignedCardPropTypes from './assignedCardPropTypes';
+import type SCREENS from '@src/SCREENS';
+import type {ReportVirtualCardFraudForm} from '@src/types/form';
+import type {Card as OnyxCard} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-const propTypes = {
-    /* Onyx Props */
-    formData: PropTypes.shape({
-        isLoading: PropTypes.bool,
-    }),
-    cardList: PropTypes.objectOf(assignedCardPropTypes),
-    /** The parameters needed to authenticate with a short-lived token are in the URL */
-    route: PropTypes.shape({
-        /** Each parameter passed via the URL */
-        params: PropTypes.shape({
-            /** Domain string */
-            domain: PropTypes.string,
-        }),
-    }).isRequired,
-};
+type ReportVirtualCardFraudPageOnyxProps = {
+    /** Form data propTypes */
+    formData: OnyxEntry<ReportVirtualCardFraudForm>;
 
-const defaultProps = {
-    cardList: {},
-    formData: {},
+    /** Card list propTypes */
+    cardList: OnyxEntry<Record<string, OnyxCard>>;
 };
 
+type ReportVirtualCardFraudPageProps = ReportVirtualCardFraudPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;
+
 function ReportVirtualCardFraudPage({
     route: {
-        params: {domain},
+        params: {domain = ''},
     },
     cardList,
     formData,
-}) {
+}: ReportVirtualCardFraudPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
     const domainCards = CardUtils.getDomainCards(cardList)[domain];
-    const virtualCard = _.find(domainCards, (card) => card.isVirtual) || {};
-    const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard) || '';
+    const virtualCard = domainCards?.find((card) => card.isVirtual);
+    const virtualCardError = ErrorUtils.getLatestErrorMessage(virtualCard?.errors ?? {});
 
-    const prevIsLoading = usePrevious(formData.isLoading);
+    const prevIsLoading = usePrevious(formData?.isLoading);
 
     useEffect(() => {
-        if (!prevIsLoading || formData.isLoading) {
+        if (!prevIsLoading || formData?.isLoading) {
             return;
         }
-        if (!_.isEmpty(virtualCard.errors)) {
+        if (!isEmptyObject(virtualCard?.errors)) {
             return;
         }
 
         Navigation.navigate(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain));
-    }, [domain, formData.isLoading, prevIsLoading, virtualCard.errors]);
+    }, [domain, formData?.isLoading, prevIsLoading, virtualCard?.errors]);
 
-    if (_.isEmpty(virtualCard)) {
+    if (isEmptyObject(virtualCard)) {
         return <NotFoundPage />;
     }
 
@@ -78,12 +71,12 @@ function ReportVirtualCardFraudPage({
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET_DOMAINCARD.getRoute(domain))}
             />
             <View style={[styles.flex1, styles.justifyContentBetween]}>
-                <Text style={[styles.baseFontStyle, styles.mh5]}>{translate('reportFraudPage.description')}</Text>
+                <Text style={[styles.webViewStyles.baseFontStyle, styles.mh5]}>{translate('reportFraudPage.description')}</Text>
                 <FormAlertWithSubmitButton
                     isAlertVisible={Boolean(virtualCardError)}
                     onSubmit={() => Card.reportVirtualExpensifyCardFraud(virtualCard.cardID)}
                     message={virtualCardError}
-                    isLoading={formData.isLoading}
+                    isLoading={formData?.isLoading}
                     buttonText={translate('reportFraudPage.deactivateCard')}
                 />
             </View>
@@ -91,11 +84,9 @@ function ReportVirtualCardFraudPage({
     );
 }
 
-ReportVirtualCardFraudPage.propTypes = propTypes;
-ReportVirtualCardFraudPage.defaultProps = defaultProps;
 ReportVirtualCardFraudPage.displayName = 'ReportVirtualCardFraudPage';
 
-export default withOnyx({
+export default withOnyx<ReportVirtualCardFraudPageProps, ReportVirtualCardFraudPageOnyxProps>({
     cardList: {
         key: ONYXKEYS.CARD_LIST,
     },
diff --git a/src/pages/settings/Wallet/TransferBalancePage.js b/src/pages/settings/Wallet/TransferBalancePage.tsx
similarity index 57%
rename from src/pages/settings/Wallet/TransferBalancePage.js
rename to src/pages/settings/Wallet/TransferBalancePage.tsx
index 5c012fdac92e..93ead17e9523 100644
--- a/src/pages/settings/Wallet/TransferBalancePage.js
+++ b/src/pages/settings/Wallet/TransferBalancePage.tsx
@@ -1,81 +1,63 @@
-import PropTypes from 'prop-types';
 import React, {useEffect} from 'react';
 import {ScrollView, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import cardPropTypes from '@components/cardPropTypes';
 import ConfirmationPage from '@components/ConfirmationPage';
 import CurrentWalletBalance from '@components/CurrentWalletBalance';
 import FormAlertWithSubmitButton from '@components/FormAlertWithSubmitButton';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
-import {withNetwork} from '@components/OnyxProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PaymentUtils from '@libs/PaymentUtils';
-import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
 import variables from '@styles/variables';
 import * as PaymentMethods from '@userActions/PaymentMethods';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import walletTransferPropTypes from './walletTransferPropTypes';
+import type {BankAccountList, FundList, UserWallet, WalletTransfer} from '@src/types/onyx';
+import type PaymentMethod from '@src/types/onyx/PaymentMethod';
+import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-const propTypes = {
+type TransferBalancePageOnyxProps = {
     /** User's wallet information */
-    userWallet: userWalletPropTypes,
+    userWallet: OnyxEntry<UserWallet>;
 
     /** List of bank accounts */
-    bankAccountList: PropTypes.objectOf(
-        PropTypes.shape({
-            /** The name of the institution (bank of america, etc) */
-            addressName: PropTypes.string,
-
-            /** The masked bank account number */
-            accountNumber: PropTypes.string,
-
-            /** The bankAccountID in the bankAccounts db */
-            bankAccountID: PropTypes.number,
-
-            /** The bank account type */
-            type: PropTypes.string,
-        }),
-    ),
+    bankAccountList: OnyxEntry<BankAccountList>;
 
     /** List of user's card objects */
-    fundList: PropTypes.objectOf(cardPropTypes),
+    fundList: OnyxEntry<FundList>;
 
     /** Wallet balance transfer props */
-    walletTransfer: walletTransferPropTypes,
-
-    ...withLocalizePropTypes,
+    walletTransfer: OnyxEntry<WalletTransfer>;
 };
 
-const defaultProps = {
-    bankAccountList: {},
-    fundList: null,
-    userWallet: {},
-    walletTransfer: {},
-};
+type TransferBalancePageProps = TransferBalancePageOnyxProps;
+
+const TRANSFER_TIER_NAMES: string[] = [CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM];
 
-function TransferBalancePage(props) {
+function TransferBalancePage({bankAccountList, fundList, userWallet, walletTransfer}: TransferBalancePageProps) {
     const styles = useThemeStyles();
-    const paymentCardList = props.fundList || {};
+    const {numberFormat, translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const paymentCardList = fundList ?? {};
 
     const paymentTypes = [
         {
             key: CONST.WALLET.TRANSFER_METHOD_TYPE.INSTANT,
-            title: props.translate('transferAmountPage.instant'),
-            description: props.translate('transferAmountPage.instantSummary', {
-                rate: props.numberFormat(CONST.WALLET.TRANSFER_METHOD_TYPE_FEE.INSTANT.RATE),
+            title: translate('transferAmountPage.instant'),
+            description: translate('transferAmountPage.instantSummary', {
+                rate: numberFormat(CONST.WALLET.TRANSFER_METHOD_TYPE_FEE.INSTANT.RATE),
                 minAmount: CurrencyUtils.convertToDisplayString(CONST.WALLET.TRANSFER_METHOD_TYPE_FEE.INSTANT.MINIMUM_FEE),
             }),
             icon: Expensicons.Bolt,
@@ -83,8 +65,8 @@ function TransferBalancePage(props) {
         },
         {
             key: CONST.WALLET.TRANSFER_METHOD_TYPE.ACH,
-            title: props.translate('transferAmountPage.ach'),
-            description: props.translate('transferAmountPage.achSummary'),
+            title: translate('transferAmountPage.ach'),
+            description: translate('transferAmountPage.achSummary'),
             icon: Expensicons.Bank,
             type: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
         },
@@ -92,32 +74,27 @@ function TransferBalancePage(props) {
 
     /**
      * Get the selected/default payment method account for wallet transfer
-     * @returns {Object|undefined}
      */
-    function getSelectedPaymentMethodAccount() {
-        const paymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles);
+    function getSelectedPaymentMethodAccount(): PaymentMethod | undefined {
+        const paymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles);
 
-        const defaultAccount = _.find(paymentMethods, (method) => method.isDefault);
-        const selectedAccount = _.find(
-            paymentMethods,
-            (method) => method.accountType === props.walletTransfer.selectedAccountType && method.methodID === props.walletTransfer.selectedAccountID,
+        const defaultAccount = paymentMethods.find((method) => method.isDefault);
+        const selectedAccount = paymentMethods.find(
+            (method) => method.accountType === walletTransfer?.selectedAccountType && method.methodID?.toString() === walletTransfer?.selectedAccountID?.toString(),
         );
-        return selectedAccount || defaultAccount;
+        return selectedAccount ?? defaultAccount;
     }
 
-    /**
-     * @param {String} filterPaymentMethodType
-     */
-    function navigateToChooseTransferAccount(filterPaymentMethodType) {
+    function navigateToChooseTransferAccount(filterPaymentMethodType: FilterMethodPaymentType) {
         PaymentMethods.saveWalletTransferMethodType(filterPaymentMethodType);
 
         // If we only have a single option for the given paymentMethodType do not force the user to make a selection
-        const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(props.bankAccountList, paymentCardList, styles);
+        const combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList ?? {}, paymentCardList, styles);
 
-        const filteredMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterPaymentMethodType);
+        const filteredMethods = combinedPaymentMethods.filter((paymentMethod) => paymentMethod.accountType === filterPaymentMethodType);
         if (filteredMethods.length === 1) {
-            const account = _.first(filteredMethods);
-            PaymentMethods.saveWalletTransferAccountTypeAndID(filterPaymentMethodType, account.methodID);
+            const account = filteredMethods[0];
+            PaymentMethods.saveWalletTransferAccountTypeAndID(filterPaymentMethodType ?? '', account?.methodID?.toString() ?? '');
             return;
         }
 
@@ -133,26 +110,26 @@ function TransferBalancePage(props) {
             return;
         }
 
-        PaymentMethods.saveWalletTransferAccountTypeAndID(selectedAccount.accountType, selectedAccount.methodID);
+        PaymentMethods.saveWalletTransferAccountTypeAndID(selectedAccount?.accountType ?? '', selectedAccount?.methodID?.toString() ?? '');
         // eslint-disable-next-line react-hooks/exhaustive-deps -- we only want this effect to run on initial render
     }, []);
 
-    if (props.walletTransfer.shouldShowSuccess && !props.walletTransfer.loading) {
+    if (walletTransfer?.shouldShowSuccess && !walletTransfer?.loading) {
         return (
             <ScreenWrapper testID={TransferBalancePage.displayName}>
                 <HeaderWithBackButton
-                    title={props.translate('common.transferBalance')}
+                    title={translate('common.transferBalance')}
                     onBackButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                 />
                 <ConfirmationPage
-                    heading={props.translate('transferAmountPage.transferSuccess')}
+                    heading={translate('transferAmountPage.transferSuccess')}
                     description={
-                        props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT
-                            ? props.translate('transferAmountPage.transferDetailBankAccount')
-                            : props.translate('transferAmountPage.transferDetailDebitCard')
+                        walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT
+                            ? translate('transferAmountPage.transferDetailBankAccount')
+                            : translate('transferAmountPage.transferDetailDebitCard')
                     }
                     shouldShowButton
-                    buttonText={props.translate('common.done')}
+                    buttonText={translate('common.done')}
                     onButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                 />
             </ScreenWrapper>
@@ -163,15 +140,13 @@ function TransferBalancePage(props) {
     const selectedPaymentType =
         selectedAccount && selectedAccount.accountType === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT ? CONST.WALLET.TRANSFER_METHOD_TYPE.ACH : CONST.WALLET.TRANSFER_METHOD_TYPE.INSTANT;
 
-    const calculatedFee = PaymentUtils.calculateWalletTransferBalanceFee(props.userWallet.currentBalance, selectedPaymentType);
-    const transferAmount = props.userWallet.currentBalance - calculatedFee;
+    const calculatedFee = PaymentUtils.calculateWalletTransferBalanceFee(userWallet?.currentBalance ?? 0, selectedPaymentType);
+    const transferAmount = userWallet?.currentBalance ?? 0 - calculatedFee;
     const isTransferable = transferAmount > 0;
     const isButtonDisabled = !isTransferable || !selectedAccount;
-    const errorMessage = ErrorUtils.getLatestErrorMessage(props.walletTransfer);
+    const errorMessage = ErrorUtils.getLatestErrorMessage(walletTransfer);
 
-    const shouldShowTransferView =
-        PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, props.bankAccountList) &&
-        _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], props.userWallet.tierName);
+    const shouldShowTransferView = PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, bankAccountList ?? {}) && TRANSFER_TIER_NAMES.includes(userWallet?.tierName ?? '');
 
     return (
         <ScreenWrapper testID={TransferBalancePage.displayName}>
@@ -183,7 +158,7 @@ function TransferBalancePage(props) {
                 onLinkPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
             >
                 <HeaderWithBackButton
-                    title={props.translate('common.transferBalance')}
+                    title={translate('common.transferBalance')}
                     shouldShowBackButton
                     onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)}
                 />
@@ -195,7 +170,7 @@ function TransferBalancePage(props) {
                     contentContainerStyle={styles.pv5}
                 >
                     <View style={styles.ph5}>
-                        {_.map(paymentTypes, (paymentType) => (
+                        {paymentTypes.map((paymentType) => (
                             <MenuItem
                                 key={paymentType.key}
                                 title={paymentType.title}
@@ -214,35 +189,35 @@ function TransferBalancePage(props) {
                             />
                         ))}
                     </View>
-                    <Text style={[styles.p5, styles.textLabelSupporting, styles.justifyContentStart]}>{props.translate('transferAmountPage.whichAccount')}</Text>
+                    <Text style={[styles.p5, styles.textLabelSupporting, styles.justifyContentStart]}>{translate('transferAmountPage.whichAccount')}</Text>
                     {Boolean(selectedAccount) && (
                         <MenuItem
-                            title={selectedAccount.title}
-                            description={selectedAccount.description}
+                            title={selectedAccount?.title}
+                            description={selectedAccount?.description}
                             shouldShowRightIcon
-                            iconStyles={selectedAccount.iconStyles}
-                            iconWidth={selectedAccount.iconSize}
-                            iconHeight={selectedAccount.iconSize}
-                            icon={selectedAccount.icon}
-                            onPress={() => navigateToChooseTransferAccount(selectedAccount.accountType)}
+                            iconStyles={selectedAccount?.iconStyles}
+                            iconWidth={selectedAccount?.iconSize}
+                            iconHeight={selectedAccount?.iconSize}
+                            icon={selectedAccount?.icon}
+                            onPress={() => navigateToChooseTransferAccount(selectedAccount?.accountType ?? CONST.PAYMENT_METHODS.DEBIT_CARD)}
                             displayInDefaultIconColor
                         />
                     )}
                     <View style={styles.ph5}>
-                        <Text style={[styles.mt5, styles.mb3, styles.textLabelSupporting, styles.justifyContentStart]}>{props.translate('transferAmountPage.fee')}</Text>
+                        <Text style={[styles.mt5, styles.mb3, styles.textLabelSupporting, styles.justifyContentStart]}>{translate('transferAmountPage.fee')}</Text>
                         <Text style={[styles.justifyContentStart]}>{CurrencyUtils.convertToDisplayString(calculatedFee)}</Text>
                     </View>
                 </ScrollView>
                 <View>
                     <FormAlertWithSubmitButton
-                        buttonText={props.translate('transferAmountPage.transfer', {
+                        buttonText={translate('transferAmountPage.transfer', {
                             amount: isTransferable ? CurrencyUtils.convertToDisplayString(transferAmount) : '',
                         })}
-                        isLoading={props.walletTransfer.loading}
-                        onSubmit={() => PaymentMethods.transferWalletBalance(selectedAccount)}
-                        isDisabled={isButtonDisabled || props.network.isOffline}
+                        isLoading={walletTransfer?.loading}
+                        onSubmit={() => selectedAccount && PaymentMethods.transferWalletBalance(selectedAccount)}
+                        isDisabled={isButtonDisabled || isOffline}
                         message={errorMessage}
-                        isAlertVisible={!_.isEmpty(errorMessage)}
+                        isAlertVisible={!isEmptyObject(errorMessage)}
                     />
                 </View>
             </FullPageNotFoundView>
@@ -250,25 +225,19 @@ function TransferBalancePage(props) {
     );
 }
 
-TransferBalancePage.propTypes = propTypes;
-TransferBalancePage.defaultProps = defaultProps;
 TransferBalancePage.displayName = 'TransferBalancePage';
 
-export default compose(
-    withLocalize,
-    withNetwork(),
-    withOnyx({
-        userWallet: {
-            key: ONYXKEYS.USER_WALLET,
-        },
-        walletTransfer: {
-            key: ONYXKEYS.WALLET_TRANSFER,
-        },
-        bankAccountList: {
-            key: ONYXKEYS.BANK_ACCOUNT_LIST,
-        },
-        fundList: {
-            key: ONYXKEYS.FUND_LIST,
-        },
-    }),
-)(TransferBalancePage);
+export default withOnyx<TransferBalancePageProps, TransferBalancePageOnyxProps>({
+    userWallet: {
+        key: ONYXKEYS.USER_WALLET,
+    },
+    walletTransfer: {
+        key: ONYXKEYS.WALLET_TRANSFER,
+    },
+    bankAccountList: {
+        key: ONYXKEYS.BANK_ACCOUNT_LIST,
+    },
+    fundList: {
+        key: ONYXKEYS.FUND_LIST,
+    },
+})(TransferBalancePage);
diff --git a/src/pages/settings/Wallet/walletTransferPropTypes.js b/src/pages/settings/Wallet/walletTransferPropTypes.js
deleted file mode 100644
index 9e25213382e9..000000000000
--- a/src/pages/settings/Wallet/walletTransferPropTypes.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import PropTypes from 'prop-types';
-import CONST from '@src/CONST';
-
-/** Wallet balance transfer props */
-const walletTransferPropTypes = PropTypes.shape({
-    /** Selected accountID for transfer */
-    selectedAccountID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
-    /** Type to filter the payment Method list */
-    filterPaymentMethodType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT, '']),
-
-    /** Whether the success screen is shown to user. */
-    shouldShowSuccess: PropTypes.bool,
-});
-
-export default walletTransferPropTypes;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index d1d60bbe8a75..1f0ac1e853ac 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4330,6 +4330,11 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
         },
 
+        walletCardNumber: {
+            color: theme.text,
+            fontSize: variables.fontSizeNormal,
+        },
+
         walletCardMenuItem: {
             fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
             fontWeight: FontUtils.fontWeight.bold,
diff --git a/src/types/onyx/Fund.ts b/src/types/onyx/Fund.ts
index 842a882ff23f..3073172a5eec 100644
--- a/src/types/onyx/Fund.ts
+++ b/src/types/onyx/Fund.ts
@@ -40,4 +40,4 @@ type Fund = {
 type FundList = Record<string, Fund>;
 
 export default Fund;
-export type {FundList};
+export type {AccountData, FundList};
diff --git a/src/types/onyx/PrivatePersonalDetails.ts b/src/types/onyx/PrivatePersonalDetails.ts
index 4d0dedf16ea7..780e3f71b61d 100644
--- a/src/types/onyx/PrivatePersonalDetails.ts
+++ b/src/types/onyx/PrivatePersonalDetails.ts
@@ -1,5 +1,6 @@
 type Address = {
     street: string;
+    street2?: string;
     city: string;
     state: string;
     zip: string;
diff --git a/src/types/onyx/WalletTransfer.ts b/src/types/onyx/WalletTransfer.ts
index 3151ecb3ad5c..961a7c9752a5 100644
--- a/src/types/onyx/WalletTransfer.ts
+++ b/src/types/onyx/WalletTransfer.ts
@@ -25,7 +25,7 @@ type WalletTransfer = {
     paymentMethodType?: ValueOf<Pick<PaymentMethod, 'accountType'>>;
 };
 
-type FilterMethodPaymentType = typeof CONST.PAYMENT_METHODS.DEBIT_CARD | typeof CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT | null;
+type FilterMethodPaymentType = typeof CONST.PAYMENT_METHODS.DEBIT_CARD | typeof CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT | '';
 
 export default WalletTransfer;