diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
deleted file mode 100644
index 5ad25d23f484..000000000000
--- a/src/components/KYCWall/BaseKYCWall.js
+++ /dev/null
@@ -1,247 +0,0 @@
-import lodashGet from 'lodash/get';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Dimensions} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
-import * as BankAccounts from '@libs/actions/BankAccounts';
-import getClickedTargetLocation from '@libs/getClickedTargetLocation';
-import Log from '@libs/Log';
-import Navigation from '@libs/Navigation/Navigation';
-import * as PaymentUtils from '@libs/PaymentUtils';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as PaymentMethods from '@userActions/PaymentMethods';
-import * as Policy from '@userActions/Policy';
-import * as Wallet from '@userActions/Wallet';
-import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
-import {defaultProps, propTypes} from './kycWallPropTypes';
-
-// This sets the Horizontal anchor position offset for POPOVER MENU.
-const POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET = 20;
-
-// This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
-// before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it
-// to render the AddPaymentMethodMenu in the correct location.
-function KYCWall({
-    addBankAccountRoute,
-    addDebitCardRoute,
-    anchorAlignment,
-    bankAccountList,
-    chatReportID,
-    children,
-    enablePaymentsRoute,
-    fundList,
-    iouReport,
-    onSelectPaymentMethod,
-    onSuccessfulKYC,
-    reimbursementAccount,
-    shouldIncludeDebitCard,
-    shouldListenForResize,
-    source,
-    userWallet,
-    walletTerms,
-    shouldShowPersonalBankAccountOption,
-}) {
-    const anchorRef = useRef(null);
-    const transferBalanceButtonRef = useRef(null);
-
-    const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
-    const [anchorPosition, setAnchorPosition] = useState({
-        anchorPositionVertical: 0,
-        anchorPositionHorizontal: 0,
-    });
-
-    /**
-     * @param {DOMRect} domRect
-     * @returns {Object}
-     */
-    const getAnchorPosition = useCallback(
-        (domRect) => {
-            if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
-                return {
-                    anchorPositionVertical: domRect.top + domRect.height + CONST.MODAL.POPOVER_MENU_PADDING,
-                    anchorPositionHorizontal: domRect.left + POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET,
-                };
-            }
-
-            return {
-                anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
-                anchorPositionHorizontal: domRect.left,
-            };
-        },
-        [anchorAlignment.vertical],
-    );
-
-    /**
-     * Set position of the transfer payment menu
-     *
-     * @param {Object} position
-     */
-    const setPositionAddPaymentMenu = ({anchorPositionVertical, anchorPositionHorizontal}) => {
-        setAnchorPosition({
-            anchorPositionVertical,
-            anchorPositionHorizontal,
-        });
-    };
-
-    const setMenuPosition = useCallback(() => {
-        if (!transferBalanceButtonRef.current) {
-            return;
-        }
-        const buttonPosition = getClickedTargetLocation(transferBalanceButtonRef.current);
-        const position = getAnchorPosition(buttonPosition);
-
-        setPositionAddPaymentMenu(position);
-    }, [getAnchorPosition]);
-
-    useEffect(() => {
-        let dimensionsSubscription = null;
-
-        PaymentMethods.kycWallRef.current = this;
-
-        if (shouldListenForResize) {
-            dimensionsSubscription = Dimensions.addEventListener('change', setMenuPosition);
-        }
-
-        return () => {
-            if (shouldListenForResize && dimensionsSubscription) {
-                dimensionsSubscription.remove();
-            }
-
-            PaymentMethods.kycWallRef.current = null;
-        };
-    }, [chatReportID, setMenuPosition, shouldListenForResize]);
-
-    /**
-     * @param {String} paymentMethod
-     */
-    const selectPaymentMethod = (paymentMethod) => {
-        onSelectPaymentMethod(paymentMethod);
-        if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
-            BankAccounts.openPersonalBankAccountSetupView();
-        } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
-            Navigation.navigate(addDebitCardRoute);
-        } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
-            if (ReportUtils.isIOUReport(iouReport)) {
-                const policyID = Policy.createWorkspaceFromIOUPayment(iouReport);
-
-                // Navigate to the bank account set up flow for this specific policy
-                Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID));
-                return;
-            }
-            Navigation.navigate(addBankAccountRoute);
-        }
-    };
-
-    /**
-     * Take the position of the button that calls this method and show the Add Payment method menu when the user has no valid payment method.
-     * If they do have a valid payment method they are navigated to the "enable payments" route to complete KYC checks.
-     * If they are already KYC'd we will continue whatever action is gated behind the KYC wall.
-     *
-     * @param {Event} event
-     * @param {String} iouPaymentType
-     */
-    const continueAction = (event, iouPaymentType) => {
-        const currentSource = lodashGet(walletTerms, 'source', source);
-
-        /**
-         * Set the source, so we can tailor the process according to how we got here.
-         * We do not want to set this on mount, as the source can change upon completing the flow, e.g. when upgrading the wallet to Gold.
-         */
-        Wallet.setKYCWallSource(source, chatReportID);
-
-        if (shouldShowAddPaymentMenu) {
-            setShouldShowAddPaymentMenu(false);
-
-            return;
-        }
-
-        // Use event target as fallback if anchorRef is null for safety
-        const targetElement = anchorRef.current || event.nativeEvent.target;
-
-        transferBalanceButtonRef.current = targetElement;
-        const isExpenseReport = ReportUtils.isExpenseReport(iouReport);
-        const paymentCardList = fundList || {};
-
-        // Check to see if user has a valid payment method on file and display the add payment popover if they don't
-        if (
-            (isExpenseReport && lodashGet(reimbursementAccount, 'achData.state', '') !== CONST.BANK_ACCOUNT.STATE.OPEN) ||
-            (!isExpenseReport && !PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, bankAccountList, shouldIncludeDebitCard))
-        ) {
-            Log.info('[KYC Wallet] User does not have valid payment method');
-            if (!shouldIncludeDebitCard) {
-                selectPaymentMethod(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
-                return;
-            }
-
-            const clickedElementLocation = getClickedTargetLocation(targetElement);
-            const position = getAnchorPosition(clickedElementLocation);
-
-            setPositionAddPaymentMenu(position);
-            setShouldShowAddPaymentMenu(true);
-
-            return;
-        }
-
-        if (!isExpenseReport) {
-            // Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks
-            const hasActivatedWallet = userWallet.tierName && _.contains([CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM], userWallet.tierName);
-            if (!hasActivatedWallet) {
-                Log.info('[KYC Wallet] User does not have active wallet');
-                Navigation.navigate(enablePaymentsRoute);
-                return;
-            }
-        }
-        Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them');
-        onSuccessfulKYC(iouPaymentType, currentSource);
-    };
-
-    return (
-        <>
-            <AddPaymentMethodMenu
-                isVisible={shouldShowAddPaymentMenu}
-                iouReport={iouReport}
-                onClose={() => setShouldShowAddPaymentMenu(false)}
-                anchorRef={anchorRef}
-                anchorPosition={{
-                    vertical: anchorPosition.anchorPositionVertical,
-                    horizontal: anchorPosition.anchorPositionHorizontal,
-                }}
-                anchorAlignment={anchorAlignment}
-                onItemSelected={(item) => {
-                    setShouldShowAddPaymentMenu(false);
-                    selectPaymentMethod(item);
-                }}
-                shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
-            />
-            {children(continueAction, anchorRef)}
-        </>
-    );
-}
-
-KYCWall.propTypes = propTypes;
-KYCWall.defaultProps = defaultProps;
-KYCWall.displayName = 'BaseKYCWall';
-
-export default withOnyx({
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
-    },
-    walletTerms: {
-        key: ONYXKEYS.WALLET_TERMS,
-    },
-    fundList: {
-        key: ONYXKEYS.FUND_LIST,
-    },
-    bankAccountList: {
-        key: ONYXKEYS.BANK_ACCOUNT_LIST,
-    },
-    reimbursementAccount: {
-        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
-    },
-    chatReport: {
-        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-    },
-})(KYCWall);
diff --git a/src/components/KYCWall/BaseKYCWall.tsx b/src/components/KYCWall/BaseKYCWall.tsx
new file mode 100644
index 000000000000..04c8397bc33b
--- /dev/null
+++ b/src/components/KYCWall/BaseKYCWall.tsx
@@ -0,0 +1,286 @@
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import type {SyntheticEvent} from 'react';
+import {Dimensions} from 'react-native';
+import type {EmitterSubscription, NativeTouchEvent} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
+import * as BankAccounts from '@libs/actions/BankAccounts';
+import getClickedTargetLocation from '@libs/getClickedTargetLocation';
+import Log from '@libs/Log';
+import Navigation from '@libs/Navigation/Navigation';
+import * as PaymentUtils from '@libs/PaymentUtils';
+import * as ReportUtils from '@libs/ReportUtils';
+import * as PaymentMethods from '@userActions/PaymentMethods';
+import * as Policy from '@userActions/Policy';
+import * as Wallet from '@userActions/Wallet';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import type {BankAccountList, FundList, ReimbursementAccount, UserWallet, WalletTerms} from '@src/types/onyx';
+import type {AnchorPosition, DomRect, KYCWallProps, PaymentMethod, TransferMethod} from './types';
+
+// This sets the Horizontal anchor position offset for POPOVER MENU.
+const POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET = 20;
+
+type BaseKYCWallOnyxProps = {
+    /** The user's wallet */
+    userWallet: OnyxEntry<UserWallet>;
+
+    /** Information related to the last step of the wallet activation flow */
+    walletTerms: OnyxEntry<WalletTerms>;
+
+    /** List of user's cards */
+    fundList: OnyxEntry<FundList>;
+
+    /** List of bank accounts */
+    bankAccountList: OnyxEntry<BankAccountList>;
+
+    /** The reimbursement account linked to the Workspace */
+    reimbursementAccount: OnyxEntry<ReimbursementAccount>;
+};
+
+type BaseKYCWallProps = KYCWallProps & BaseKYCWallOnyxProps;
+
+// This component allows us to block various actions by forcing the user to first add a default payment method and successfully make it through our Know Your Customer flow
+// before continuing to take whatever action they originally intended to take. It requires a button as a child and a native event so we can get the coordinates and use it
+// to render the AddPaymentMethodMenu in the correct location.
+function KYCWall({
+    addBankAccountRoute,
+    addDebitCardRoute,
+    anchorAlignment = {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+    },
+    bankAccountList = {},
+    chatReportID = '',
+    children,
+    enablePaymentsRoute,
+    fundList,
+    iouReport,
+    onSelectPaymentMethod = () => {},
+    onSuccessfulKYC,
+    reimbursementAccount,
+    shouldIncludeDebitCard = true,
+    shouldListenForResize = false,
+    source,
+    userWallet,
+    walletTerms,
+    shouldShowPersonalBankAccountOption = false,
+}: BaseKYCWallProps) {
+    const anchorRef = useRef<HTMLDivElement>(null);
+    const transferBalanceButtonRef = useRef<HTMLDivElement | null>(null);
+
+    const [shouldShowAddPaymentMenu, setShouldShowAddPaymentMenu] = useState(false);
+
+    const [anchorPosition, setAnchorPosition] = useState({
+        anchorPositionVertical: 0,
+        anchorPositionHorizontal: 0,
+    });
+
+    const getAnchorPosition = useCallback(
+        (domRect: DomRect): AnchorPosition => {
+            if (anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) {
+                return {
+                    anchorPositionVertical: domRect.top + domRect.height + CONST.MODAL.POPOVER_MENU_PADDING,
+                    anchorPositionHorizontal: domRect.left + POPOVER_MENU_ANCHOR_POSITION_HORIZONTAL_OFFSET,
+                };
+            }
+
+            return {
+                anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
+                anchorPositionHorizontal: domRect.left,
+            };
+        },
+        [anchorAlignment.vertical],
+    );
+
+    /**
+     * Set position of the transfer payment menu
+     */
+    const setPositionAddPaymentMenu = ({anchorPositionVertical, anchorPositionHorizontal}: AnchorPosition) => {
+        setAnchorPosition({
+            anchorPositionVertical,
+            anchorPositionHorizontal,
+        });
+    };
+
+    const setMenuPosition = useCallback(() => {
+        if (!transferBalanceButtonRef.current) {
+            return;
+        }
+
+        const buttonPosition = getClickedTargetLocation(transferBalanceButtonRef.current);
+        const position = getAnchorPosition(buttonPosition);
+
+        setPositionAddPaymentMenu(position);
+    }, [getAnchorPosition]);
+
+    const selectPaymentMethod = useCallback(
+        (paymentMethod: PaymentMethod) => {
+            onSelectPaymentMethod(paymentMethod);
+
+            if (paymentMethod === CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT) {
+                BankAccounts.openPersonalBankAccountSetupView();
+            } else if (paymentMethod === CONST.PAYMENT_METHODS.DEBIT_CARD) {
+                Navigation.navigate(addDebitCardRoute);
+            } else if (paymentMethod === CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT) {
+                if (iouReport && ReportUtils.isIOUReport(iouReport)) {
+                    const policyID = Policy.createWorkspaceFromIOUPayment(iouReport);
+
+                    // Navigate to the bank account set up flow for this specific policy
+                    Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('', policyID));
+
+                    return;
+                }
+                Navigation.navigate(addBankAccountRoute);
+            }
+        },
+        [addBankAccountRoute, addDebitCardRoute, iouReport, onSelectPaymentMethod],
+    );
+
+    /**
+     * Take the position of the button that calls this method and show the Add Payment method menu when the user has no valid payment method.
+     * If they do have a valid payment method they are navigated to the "enable payments" route to complete KYC checks.
+     * If they are already KYC'd we will continue whatever action is gated behind the KYC wall.
+     *
+     */
+    const continueAction = useCallback(
+        (event?: SyntheticEvent<NativeTouchEvent>, iouPaymentType?: TransferMethod) => {
+            const currentSource = walletTerms?.source ?? source;
+
+            /**
+             * Set the source, so we can tailor the process according to how we got here.
+             * We do not want to set this on mount, as the source can change upon completing the flow, e.g. when upgrading the wallet to Gold.
+             */
+            Wallet.setKYCWallSource(source, chatReportID);
+
+            if (shouldShowAddPaymentMenu) {
+                setShouldShowAddPaymentMenu(false);
+                return;
+            }
+
+            // Use event target as fallback if anchorRef is null for safety
+            const targetElement = anchorRef.current ?? (event?.nativeEvent.target as HTMLDivElement);
+
+            transferBalanceButtonRef.current = targetElement;
+
+            const isExpenseReport = ReportUtils.isExpenseReport(iouReport ?? null);
+            const paymentCardList = fundList ?? {};
+
+            // Check to see if user has a valid payment method on file and display the add payment popover if they don't
+            if (
+                (isExpenseReport && reimbursementAccount?.achData?.state !== CONST.BANK_ACCOUNT.STATE.OPEN) ||
+                (!isExpenseReport && bankAccountList !== null && !PaymentUtils.hasExpensifyPaymentMethod(paymentCardList, bankAccountList, shouldIncludeDebitCard))
+            ) {
+                Log.info('[KYC Wallet] User does not have valid payment method');
+
+                if (!shouldIncludeDebitCard) {
+                    selectPaymentMethod(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
+                    return;
+                }
+
+                const clickedElementLocation = getClickedTargetLocation(targetElement);
+                const position = getAnchorPosition(clickedElementLocation);
+
+                setPositionAddPaymentMenu(position);
+                setShouldShowAddPaymentMenu(true);
+
+                return;
+            }
+            if (!isExpenseReport) {
+                // Ask the user to upgrade to a gold wallet as this means they have not yet gone through our Know Your Customer (KYC) checks
+                const hasActivatedWallet = userWallet?.tierName && [CONST.WALLET.TIER_NAME.GOLD, CONST.WALLET.TIER_NAME.PLATINUM].some((name) => name === userWallet.tierName);
+
+                if (!hasActivatedWallet) {
+                    Log.info('[KYC Wallet] User does not have active wallet');
+
+                    Navigation.navigate(enablePaymentsRoute);
+
+                    return;
+                }
+            }
+
+            Log.info('[KYC Wallet] User has valid payment method and passed KYC checks or did not need them');
+
+            onSuccessfulKYC(currentSource, iouPaymentType);
+        },
+        [
+            bankAccountList,
+            chatReportID,
+            enablePaymentsRoute,
+            fundList,
+            getAnchorPosition,
+            iouReport,
+            onSuccessfulKYC,
+            reimbursementAccount?.achData?.state,
+            selectPaymentMethod,
+            shouldIncludeDebitCard,
+            shouldShowAddPaymentMenu,
+            source,
+            userWallet?.tierName,
+            walletTerms?.source,
+        ],
+    );
+
+    useEffect(() => {
+        let dimensionsSubscription: EmitterSubscription | null = null;
+
+        PaymentMethods.kycWallRef.current = {continueAction};
+
+        if (shouldListenForResize) {
+            dimensionsSubscription = Dimensions.addEventListener('change', setMenuPosition);
+        }
+
+        return () => {
+            if (shouldListenForResize && dimensionsSubscription) {
+                dimensionsSubscription.remove();
+            }
+
+            PaymentMethods.kycWallRef.current = null;
+        };
+    }, [chatReportID, setMenuPosition, shouldListenForResize, continueAction]);
+
+    return (
+        <>
+            <AddPaymentMethodMenu
+                // @ts-expect-error TODO: Remove this once AddPaymentMethodMenu (https://github.com/Expensify/App/issues/25073) is migrated to TypeScript.
+                isVisible={shouldShowAddPaymentMenu}
+                iouReport={iouReport}
+                onClose={() => setShouldShowAddPaymentMenu(false)}
+                anchorRef={anchorRef}
+                anchorPosition={{
+                    vertical: anchorPosition.anchorPositionVertical,
+                    horizontal: anchorPosition.anchorPositionHorizontal,
+                }}
+                anchorAlignment={anchorAlignment}
+                onItemSelected={(item: PaymentMethod) => {
+                    setShouldShowAddPaymentMenu(false);
+                    selectPaymentMethod(item);
+                }}
+                shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
+            />
+            {children(continueAction, anchorRef)}
+        </>
+    );
+}
+
+KYCWall.displayName = 'BaseKYCWall';
+
+export default withOnyx<BaseKYCWallProps, BaseKYCWallOnyxProps>({
+    userWallet: {
+        key: ONYXKEYS.USER_WALLET,
+    },
+    walletTerms: {
+        key: ONYXKEYS.WALLET_TERMS,
+    },
+    fundList: {
+        key: ONYXKEYS.FUND_LIST,
+    },
+    bankAccountList: {
+        key: ONYXKEYS.BANK_ACCOUNT_LIST,
+    },
+    reimbursementAccount: {
+        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+    },
+})(KYCWall);
diff --git a/src/components/KYCWall/index.native.js b/src/components/KYCWall/index.native.ts
similarity index 100%
rename from src/components/KYCWall/index.native.js
rename to src/components/KYCWall/index.native.ts
diff --git a/src/components/KYCWall/index.js b/src/components/KYCWall/index.tsx
similarity index 66%
rename from src/components/KYCWall/index.js
rename to src/components/KYCWall/index.tsx
index 49329c73d474..e99efee67210 100644
--- a/src/components/KYCWall/index.js
+++ b/src/components/KYCWall/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import BaseKYCWall from './BaseKYCWall';
-import {defaultProps, propTypes} from './kycWallPropTypes';
+import type {KYCWallProps} from './types';
 
-function KYCWall(props) {
+function KYCWall(props: KYCWallProps) {
     return (
         <BaseKYCWall
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -12,8 +12,6 @@ function KYCWall(props) {
     );
 }
 
-KYCWall.propTypes = propTypes;
-KYCWall.defaultProps = defaultProps;
 KYCWall.displayName = 'KYCWall';
 
 export default KYCWall;
diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js
deleted file mode 100644
index 2f14f1e12e11..000000000000
--- a/src/components/KYCWall/kycWallPropTypes.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import PropTypes from 'prop-types';
-import _ from 'underscore';
-import bankAccountPropTypes from '@components/bankAccountPropTypes';
-import cardPropTypes from '@components/cardPropTypes';
-import userWalletPropTypes from '@pages/EnablePayments/userWalletPropTypes';
-import walletTermsPropTypes from '@pages/EnablePayments/walletTermsPropTypes';
-import iouReportPropTypes from '@pages/iouReportPropTypes';
-import reimbursementAccountPropTypes from '@pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes';
-import CONST from '@src/CONST';
-
-const propTypes = {
-    /** Route for the Add Bank Account screen for a given navigation stack */
-    addBankAccountRoute: PropTypes.string.isRequired,
-
-    /** Route for the Add Debit Card screen for a given navigation stack */
-    addDebitCardRoute: PropTypes.string,
-
-    /** Route for the KYC enable payments screen for a given navigation stack */
-    enablePaymentsRoute: PropTypes.string.isRequired,
-
-    /** Listen for window resize event on web and desktop */
-    shouldListenForResize: PropTypes.bool,
-
-    /** Wrapped components should be disabled, and not in spinner/loading state */
-    isDisabled: PropTypes.bool,
-
-    /** The user's wallet */
-    userWallet: userWalletPropTypes,
-
-    /** Information related to the last step of the wallet activation flow */
-    walletTerms: walletTermsPropTypes,
-
-    /** The source that triggered the KYC wall */
-    source: PropTypes.oneOf(_.values(CONST.KYC_WALL_SOURCE)).isRequired,
-
-    /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
-    chatReportID: PropTypes.string,
-
-    /** List of user's cards */
-    fundList: PropTypes.objectOf(cardPropTypes),
-
-    /** List of bank accounts */
-    bankAccountList: PropTypes.objectOf(bankAccountPropTypes),
-
-    /** The chat report this report is linked to */
-    chatReport: iouReportPropTypes,
-
-    /** The IOU/Expense report we are paying */
-    iouReport: iouReportPropTypes,
-
-    /** The reimbursement account linked to the Workspace */
-    reimbursementAccount: reimbursementAccountPropTypes,
-
-    /** Where the popover should be positioned relative to the anchor points. */
-    anchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
-
-    /** Whether the option to add a debit card should be included */
-    shouldIncludeDebitCard: PropTypes.bool,
-
-    /** Callback for when a payment method has been selected */
-    onSelectPaymentMethod: PropTypes.func,
-
-    /** Whether the personal bank account option should be shown */
-    shouldShowPersonalBankAccountOption: PropTypes.bool,
-};
-
-const defaultProps = {
-    userWallet: {},
-    walletTerms: {},
-    shouldListenForResize: false,
-    isDisabled: false,
-    chatReportID: '',
-    bankAccountList: {},
-    fundList: null,
-    chatReport: null,
-    reimbursementAccount: {},
-    addDebitCardRoute: '',
-    iouReport: {},
-    anchorAlignment: {
-        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-    },
-    shouldIncludeDebitCard: true,
-    onSelectPaymentMethod: () => {},
-    shouldShowPersonalBankAccountOption: false,
-};
-
-export {propTypes, defaultProps};
diff --git a/src/components/KYCWall/types.ts b/src/components/KYCWall/types.ts
new file mode 100644
index 000000000000..aee5b569cc46
--- /dev/null
+++ b/src/components/KYCWall/types.ts
@@ -0,0 +1,73 @@
+import type {ForwardedRef, SyntheticEvent} from 'react';
+import type {NativeTouchEvent} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+import type {Route} from '@src/ROUTES';
+import type {Report} from '@src/types/onyx';
+
+type Source = ValueOf<typeof CONST.KYC_WALL_SOURCE>;
+
+type TransferMethod = ValueOf<typeof CONST.WALLET.TRANSFER_METHOD_TYPE>;
+
+type DOMRectProperties = 'top' | 'bottom' | 'left' | 'right' | 'height' | 'x' | 'y';
+
+type DomRect = Pick<DOMRect, DOMRectProperties>;
+
+type AnchorAlignment = {
+    horizontal: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL>;
+    vertical: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_VERTICAL>;
+};
+
+type AnchorPosition = {
+    anchorPositionVertical: number;
+    anchorPositionHorizontal: number;
+};
+
+type PaymentMethod = ValueOf<typeof CONST.PAYMENT_METHODS>;
+
+type KYCWallProps = {
+    /** Route for the Add Bank Account screen for a given navigation stack */
+    addBankAccountRoute: Route;
+
+    /** Route for the Add Debit Card screen for a given navigation stack */
+    addDebitCardRoute?: Route;
+
+    /** Route for the KYC enable payments screen for a given navigation stack */
+    enablePaymentsRoute: Route;
+
+    /** Listen for window resize event on web and desktop */
+    shouldListenForResize?: boolean;
+
+    /** Wrapped components should be disabled, and not in spinner/loading state */
+    isDisabled?: boolean;
+
+    /** The source that triggered the KYC wall */
+    source?: Source;
+
+    /** When the button is opened via an IOU, ID for the chatReport that the IOU is linked to */
+    chatReportID?: string;
+
+    /** The IOU/Expense report we are paying */
+    iouReport?: OnyxEntry<Report>;
+
+    /** Where the popover should be positioned relative to the anchor points. */
+    anchorAlignment?: AnchorAlignment;
+
+    /** Whether the option to add a debit card should be included */
+    shouldIncludeDebitCard?: boolean;
+
+    /** Callback for when a payment method has been selected */
+    onSelectPaymentMethod?: (paymentMethod: PaymentMethod) => void;
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption?: boolean;
+
+    /** Callback for the end of the onContinue trigger on option selection */
+    onSuccessfulKYC: (currentSource?: Source, iouPaymentType?: TransferMethod) => void;
+
+    /** Children to build the KYC */
+    children: (continueAction: (event: SyntheticEvent<NativeTouchEvent>, method: TransferMethod) => void, anchorRef: ForwardedRef<HTMLElement>) => void;
+};
+
+export type {AnchorPosition, KYCWallProps, PaymentMethod, TransferMethod, DomRect};
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index e4b82aa36c7a..39fe12ee1ab1 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -535,7 +535,7 @@ function getReportParticipantsTitle(accountIDs: number[]): string {
 /**
  * Checks if a report is a chat report.
  */
-function isChatReport(report: OnyxEntry<Report>): boolean {
+function isChatReport(report: OnyxEntry<Report> | EmptyObject): boolean {
     return report?.type === CONST.REPORT.TYPE.CHAT;
 }
 
diff --git a/src/libs/actions/BankAccounts.ts b/src/libs/actions/BankAccounts.ts
index f7b7ec89c670..1ce6bc38191f 100644
--- a/src/libs/actions/BankAccounts.ts
+++ b/src/libs/actions/BankAccounts.ts
@@ -50,7 +50,7 @@ function setPlaidEvent(eventName: string) {
 /**
  * Open the personal bank account setup flow, with an optional exitReportID to redirect to once the flow is finished.
  */
-function openPersonalBankAccountSetupView(exitReportID: string) {
+function openPersonalBankAccountSetupView(exitReportID?: string) {
     clearPlaid().then(() => {
         if (exitReportID) {
             Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {exitReportID});
diff --git a/src/libs/actions/PaymentMethods.ts b/src/libs/actions/PaymentMethods.ts
index a7ae54f46416..7e91c3531b3a 100644
--- a/src/libs/actions/PaymentMethods.ts
+++ b/src/libs/actions/PaymentMethods.ts
@@ -1,8 +1,11 @@
 import {createRef} from 'react';
+import type {MutableRefObject, SyntheticEvent} from 'react';
+import type {NativeTouchEvent} from 'react-native';
 import type {OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import type {ValueOf} from 'type-fest';
+import type {TransferMethod} from '@components/KYCWall/types';
 import * as API from '@libs/API';
 import * as CardUtils from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
@@ -14,13 +17,13 @@ import type PaymentMethod from '@src/types/onyx/PaymentMethod';
 import type {FilterMethodPaymentType} from '@src/types/onyx/WalletTransfer';
 
 type KYCWallRef = {
-    continueAction?: () => void;
+    continueAction?: (event?: SyntheticEvent<NativeTouchEvent>, iouPaymentType?: TransferMethod) => void;
 };
 
 /**
  * Sets up a ref to an instance of the KYC Wall component.
  */
-const kycWallRef = createRef<KYCWallRef>();
+const kycWallRef: MutableRefObject<KYCWallRef | null> = createRef<KYCWallRef>();
 
 /**
  * When we successfully add a payment method or pass the KYC checks we will continue with our setup action if we have one set.
diff --git a/src/libs/actions/Wallet.ts b/src/libs/actions/Wallet.ts
index bc2fb518d8e6..e7a272343209 100644
--- a/src/libs/actions/Wallet.ts
+++ b/src/libs/actions/Wallet.ts
@@ -88,7 +88,7 @@ function setAdditionalDetailsErrorMessage(additionalErrorMessage: string) {
 /**
  * Save the source that triggered the KYC wall and optionally the chat report ID associated with the IOU
  */
-function setKYCWallSource(source: string, chatReportID = '') {
+function setKYCWallSource(source?: ValueOf<typeof CONST.KYC_WALL_SOURCE>, chatReportID = '') {
     Onyx.merge(ONYXKEYS.WALLET_TERMS, {source, chatReportID});
 }
 
diff --git a/src/types/onyx/WalletTerms.ts b/src/types/onyx/WalletTerms.ts
index b8fcdfeabe3e..f0563310859a 100644
--- a/src/types/onyx/WalletTerms.ts
+++ b/src/types/onyx/WalletTerms.ts
@@ -1,3 +1,5 @@
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
 import type * as OnyxCommon from './OnyxCommon';
 
 type WalletTerms = {
@@ -7,8 +9,8 @@ type WalletTerms = {
     /** When the user accepts the Wallet's terms in order to pay an IOU, this is the ID of the chatReport the IOU is linked to */
     chatReportID?: string;
 
-    /** Source that triggered the KYC wall */
-    source?: string;
+    /** The source that triggered the KYC wall */
+    source?: ValueOf<typeof CONST.KYC_WALL_SOURCE>;
 
     /** Loading state to provide feedback when we are waiting for a request to finish */
     isLoading?: boolean;