Merge pull request #48786 from software-mansion-labs/war-in/fix-walle…

…t-scrollbar

Fix `WalletPage` scrollbar

src/pages/settings/Wallet/WalletPage/WalletPage.tsx

@@ -3,7 +3,7 @@ import type {ForwardedRef, RefObject} from 'react';
 import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import {ActivityIndicator, Dimensions, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
 import ConfirmModal from '@components/ConfirmModal';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -40,7 +40,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {AccountData} from '@src/types/onyx';
-import type {FormattedSelectedPaymentMethodIcon, WalletPageOnyxProps, WalletPageProps} from './types';
+import type {FormattedSelectedPaymentMethodIcon, WalletPageProps} from './types';
 
 type FormattedSelectedPaymentMethod = {
     title: string;
@@ -57,7 +57,14 @@ type PaymentMethodState = {
     selectedPaymentMethodType: string;
 };
 
-function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadingPaymentMethods = true, shouldListenForResize = false, userWallet, walletTerms = {}}: WalletPageProps) {
+function WalletPage({shouldListenForResize = false}: WalletPageProps) {
+    const [bankAccountList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST, {initialValue: {}});
+    const [cardList] = useOnyx(ONYXKEYS.CARD_LIST, {initialValue: {}});
+    const [fundList] = useOnyx(ONYXKEYS.FUND_LIST, {initialValue: {}});
+    const [isLoadingPaymentMethods] = useOnyx(ONYXKEYS.IS_LOADING_PAYMENT_METHODS, {initialValue: true});
+    const [userWallet] = useOnyx(ONYXKEYS.USER_WALLET);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS, {initialValue: {}});
+
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -617,26 +624,4 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi
 
 WalletPage.displayName = 'WalletPage';
 
-export default withOnyx<WalletPageProps, WalletPageOnyxProps>({
-    cardList: {
-        key: ONYXKEYS.CARD_LIST,
-    },
-    walletTransfer: {
-        key: ONYXKEYS.WALLET_TRANSFER,
-    },
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
-    },
-    bankAccountList: {
-        key: ONYXKEYS.BANK_ACCOUNT_LIST,
-    },
-    fundList: {
-        key: ONYXKEYS.FUND_LIST,
-    },
-    walletTerms: {
-        key: ONYXKEYS.WALLET_TERMS,
-    },
-    isLoadingPaymentMethods: {
-        key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS,
-    },
-})(WalletPage);
+export default WalletPage;

src/pages/settings/Wallet/WalletPage/types.ts

@@ -1,31 +1,7 @@
 import type {ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import type {BankAccountList, CardList, FundList, UserWallet, WalletTerms, WalletTransfer} from '@src/types/onyx';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-type WalletPageOnyxProps = {
-    /** Wallet balance transfer props */
-    walletTransfer: OnyxEntry<WalletTransfer>;
-
-    /** The user's wallet account */
-    userWallet: OnyxEntry<UserWallet>;
-
-    /** List of bank accounts */
-    bankAccountList: OnyxEntry<BankAccountList>;
-
-    /** List of user's cards */
-    fundList: OnyxEntry<FundList>;
-
-    /** Information about the user accepting the terms for payments */
-    walletTerms: OnyxEntry<WalletTerms>;
-
-    cardList: OnyxEntry<CardList>;
-
-    /** Are we loading payment methods? */
-    isLoadingPaymentMethods: OnyxEntry<boolean>;
-};
-
-type WalletPageProps = WalletPageOnyxProps & {
+type WalletPageProps = {
     /** Listen for window resize event on web and desktop. */
     shouldListenForResize?: boolean;
 };
@@ -38,4 +14,4 @@ type FormattedSelectedPaymentMethodIcon = {
     iconSize?: number;
 };
 
-export type {WalletPageOnyxProps, WalletPageProps, FormattedSelectedPaymentMethodIcon};
+export type {WalletPageProps, FormattedSelectedPaymentMethodIcon};