diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index 03b69a8f73ab2..49c27d4e3c67e 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/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({ - 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; diff --git a/src/pages/settings/Wallet/WalletPage/types.ts b/src/pages/settings/Wallet/WalletPage/types.ts index ffee0c677c331..f8abb7e0c017b 100644 --- a/src/pages/settings/Wallet/WalletPage/types.ts +++ b/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; - - /** 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; - - cardList: OnyxEntry; - - /** Are we loading payment methods? */ - isLoadingPaymentMethods: OnyxEntry; -}; - -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};