diff --git a/assets/images/table.svg b/assets/images/table.svg
index a9cfe68f339e..36d4ced774f1 100644
--- a/assets/images/table.svg
+++ b/assets/images/table.svg
@@ -1,3 +1,3 @@
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
index 2524658d6ffc..ec0fdeccea88 100644
--- a/src/components/MenuItem.tsx
+++ b/src/components/MenuItem.tsx
@@ -416,7 +416,7 @@ function MenuItem(
titleWithTooltips,
displayInDefaultIconColor = false,
contentFit = 'cover',
- isPaneMenu = false,
+ isPaneMenu = true,
shouldPutLeftPaddingWhenNoIcon = false,
onFocus,
onBlur,
diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx
index d33a17f90a5e..b2d79b6243ac 100644
--- a/src/components/MenuItemList.tsx
+++ b/src/components/MenuItemList.tsx
@@ -49,20 +49,9 @@ type MenuItemListProps = {
/** Icon Height */
iconHeight?: number;
-
- /** Is this in the Pane */
- isPaneMenu?: boolean;
};
-function MenuItemList({
- menuItems = [],
- shouldUseSingleExecution = false,
- wrapperStyle = {},
- icon = undefined,
- iconWidth = undefined,
- iconHeight = undefined,
- isPaneMenu = false,
-}: MenuItemListProps) {
+function MenuItemList({menuItems = [], shouldUseSingleExecution = false, wrapperStyle = {}, icon = undefined, iconWidth = undefined, iconHeight = undefined}: MenuItemListProps) {
const popoverAnchor = useRef(null);
const {isExecuting, singleExecution} = useSingleExecution();
@@ -99,7 +88,6 @@ function MenuItemList({
icon={icon}
iconWidth={iconWidth}
iconHeight={iconHeight}
- isPaneMenu={isPaneMenu}
// eslint-disable-next-line react/jsx-props-no-spreading
{...menuItemProps}
disabled={!!menuItemProps.disabled || isExecuting}
diff --git a/src/components/ThreeDotsMenu/index.tsx b/src/components/ThreeDotsMenu/index.tsx
index da72135c6035..e44d57ab18e2 100644
--- a/src/components/ThreeDotsMenu/index.tsx
+++ b/src/components/ThreeDotsMenu/index.tsx
@@ -1,7 +1,6 @@
import React, {useEffect, useRef, useState} from 'react';
import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import PopoverMenu from '@components/PopoverMenu';
@@ -13,14 +12,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
import * as Browser from '@libs/Browser';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
-import type {Modal} from '@src/types/onyx';
import type ThreeDotsMenuProps from './types';
-type ThreeDotsMenuOnyxProps = {
- /** Details about any modals being used */
- modal: OnyxEntry;
-};
-
function ThreeDotsMenu({
iconTooltip = 'common.more',
icon = Expensicons.ThreeDots,
@@ -36,8 +29,9 @@ function ThreeDotsMenu({
shouldOverlay = false,
shouldSetModalVisibility = true,
disabled = false,
- modal = {},
}: ThreeDotsMenuProps) {
+ const [modal] = useOnyx(ONYXKEYS.MODAL);
+
const theme = useTheme();
const styles = useThemeStyles();
const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
@@ -114,8 +108,4 @@ function ThreeDotsMenu({
ThreeDotsMenu.displayName = 'ThreeDotsMenu';
-export default withOnyx({
- modal: {
- key: ONYXKEYS.MODAL,
- },
-})(ThreeDotsMenu);
+export default ThreeDotsMenu;
diff --git a/src/components/ThreeDotsMenu/types.ts b/src/components/ThreeDotsMenu/types.ts
index 6c3618ffc3ce..86a10d08d449 100644
--- a/src/components/ThreeDotsMenu/types.ts
+++ b/src/components/ThreeDotsMenu/types.ts
@@ -1,18 +1,11 @@
import type {StyleProp, ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
import type {PopoverMenuItem} from '@components/PopoverMenu';
import type {TranslationPaths} from '@src/languages/types';
import type {AnchorPosition} from '@src/styles';
-import type {Modal} from '@src/types/onyx';
import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
import type IconAsset from '@src/types/utils/IconAsset';
-type ThreeDotsMenuOnyxProps = {
- /** Details about any modals being used */
- modal: OnyxEntry;
-};
-
-type ThreeDotsMenuProps = ThreeDotsMenuOnyxProps & {
+type ThreeDotsMenuProps = {
/** Tooltip for the popup icon */
iconTooltip?: TranslationPaths;
diff --git a/src/pages/Search/SearchTypeMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx
index 311168dc5d61..ec52fa916c2f 100644
--- a/src/pages/Search/SearchTypeMenu.tsx
+++ b/src/pages/Search/SearchTypeMenu.tsx
@@ -191,7 +191,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
iconWidth={variables.iconSizeNormal}
iconHeight={variables.iconSizeNormal}
shouldUseSingleExecution
- isPaneMenu
/>
),
@@ -236,7 +235,6 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) {
wrapperStyle={styles.sectionMenuItem}
focused={index === activeItemIndex}
onPress={onPress}
- isPaneMenu
/>
);
})}
diff --git a/src/pages/home/sidebar/AllSettingsScreen.tsx b/src/pages/home/sidebar/AllSettingsScreen.tsx
index c94c7012e411..0025e6b429c5 100644
--- a/src/pages/home/sidebar/AllSettingsScreen.tsx
+++ b/src/pages/home/sidebar/AllSettingsScreen.tsx
@@ -1,6 +1,5 @@
import React, {useMemo} from 'react';
-import type {OnyxCollection} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
import Breadcrumbs from '@components/Breadcrumbs';
import * as Expensicons from '@components/Icon/Expensicons';
import MenuItemList from '@components/MenuItemList';
@@ -17,15 +16,10 @@ import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
-import type {Policy} from '@src/types/onyx';
-type AllSettingsScreenOnyxProps = {
- policies: OnyxCollection;
-};
+function AllSettingsScreen() {
+ const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
-type AllSettingsScreenProps = AllSettingsScreenOnyxProps;
-
-function AllSettingsScreen({policies}: AllSettingsScreenProps) {
const styles = useThemeStyles();
const waitForNavigate = useWaitForNavigation();
const {translate} = useLocalize();
@@ -86,7 +80,6 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) {
shouldShowRightIcon: item.shouldShowRightIcon,
shouldBlockSelection: !!item.link,
wrapperStyle: styles.sectionMenuItem,
- isPaneMenu: true,
focused: item.focused,
brickRoadIndicator: item.brickRoadIndicator,
}));
@@ -122,8 +115,4 @@ function AllSettingsScreen({policies}: AllSettingsScreenProps) {
AllSettingsScreen.displayName = 'AllSettingsScreen';
-export default withOnyx({
- policies: {
- key: ONYXKEYS.COLLECTION.POLICY,
- },
-})(AllSettingsScreen);
+export default AllSettingsScreen;
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index 851f8ca5441b..8dce84f8b470 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -3,8 +3,7 @@ import React, {useCallback, useContext, useEffect, useLayoutEffect, useMemo, use
// eslint-disable-next-line no-restricted-imports
import type {GestureResponderEvent, ScrollView as RNScrollView, ScrollViewProps, StyleProp, ViewStyle} from 'react-native';
import {NativeModules, View} from 'react-native';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
import type {ValueOf} from 'type-fest';
import AccountSwitcher from '@components/AccountSwitcher';
import AccountSwitcherSkeletonView from '@components/AccountSwitcherSkeletonView';
@@ -45,32 +44,11 @@ import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import type {Route} from '@src/ROUTES';
import ROUTES from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
import type {Icon as TIcon} from '@src/types/onyx/OnyxCommon';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import type IconAsset from '@src/types/utils/IconAsset';
-type InitialSettingsPageOnyxProps = {
- /** The user's wallet account */
- userWallet: OnyxEntry;
-
- /** List of bank accounts */
- bankAccountList: OnyxEntry;
-
- /** List of user's cards */
- fundList: OnyxEntry;
-
- /** Information about the user accepting the terms for payments */
- walletTerms: OnyxEntry;
-
- /** Login list for the user that is signed in */
- loginList: OnyxEntry;
-
- /** The policies which the user has access to */
- policies: OnyxCollection;
-};
-
-type InitialSettingsPageProps = InitialSettingsPageOnyxProps & WithCurrentUserPersonalDetailsProps;
+type InitialSettingsPageProps = WithCurrentUserPersonalDetailsProps;
type MenuData = {
translationKey: TranslationPaths;
@@ -94,7 +72,14 @@ type MenuData = {
type Menu = {sectionStyle: StyleProp; sectionTranslationKey: TranslationPaths; items: MenuData[]};
-function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms, loginList, currentUserPersonalDetails, policies}: InitialSettingsPageProps) {
+function InitialSettingsPage({currentUserPersonalDetails}: InitialSettingsPageProps) {
+ const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
+ const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
+ const [fundList] = useOnyx(ONYXKEYS.FUND_LIST);
+ const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+ const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
+ const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+
const network = useNetwork();
const theme = useTheme();
const styles = useThemeStyles();
@@ -342,7 +327,6 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
!!item.routeName &&
!!(activeCentralPaneRoute.name.toLowerCase().replaceAll('_', '') === item.routeName.toLowerCase().replaceAll('/', ''))
}
- isPaneMenu
iconRight={item.iconRight}
shouldShowRightIcon={item.shouldShowRightIcon}
/>
@@ -450,25 +434,4 @@ function InitialSettingsPage({userWallet, bankAccountList, fundList, walletTerms
InitialSettingsPage.displayName = 'InitialSettingsPage';
-export default withCurrentUserPersonalDetails(
- withOnyx({
- userWallet: {
- key: ONYXKEYS.USER_WALLET,
- },
- bankAccountList: {
- key: ONYXKEYS.BANK_ACCOUNT_LIST,
- },
- fundList: {
- key: ONYXKEYS.FUND_LIST,
- },
- walletTerms: {
- key: ONYXKEYS.WALLET_TERMS,
- },
- loginList: {
- key: ONYXKEYS.LOGIN_LIST,
- },
- policies: {
- key: ONYXKEYS.COLLECTION.POLICY,
- },
- })(InitialSettingsPage),
-);
+export default withCurrentUserPersonalDetails(InitialSettingsPage);
diff --git a/src/pages/settings/Security/SecuritySettingsPage.tsx b/src/pages/settings/Security/SecuritySettingsPage.tsx
index e54e7d873096..988d9701ed88 100644
--- a/src/pages/settings/Security/SecuritySettingsPage.tsx
+++ b/src/pages/settings/Security/SecuritySettingsPage.tsx
@@ -17,7 +17,6 @@ import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
import usePermissions from '@hooks/usePermissions';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWaitForNavigation from '@hooks/useWaitForNavigation';
import {clearAddDelegateErrors} from '@libs/actions/Delegate';
@@ -36,7 +35,6 @@ function SecuritySettingsPage() {
const {translate} = useLocalize();
const waitForNavigate = useWaitForNavigation();
const {shouldUseNarrowLayout} = useResponsiveLayout();
- const theme = useTheme();
const {canUseNewDotCopilot} = usePermissions();
const [account] = useOnyx(ONYXKEYS.ACCOUNT);
const isActingAsDelegate = !!account?.delegatedAccess?.delegate ?? false;
@@ -189,7 +187,6 @@ function SecuritySettingsPage() {