diff --git a/src/pages/settings/Wallet/PaymentMethodList.tsx b/src/pages/settings/Wallet/PaymentMethodList.tsx index 9193074f96c8..556634269f5c 100644 --- a/src/pages/settings/Wallet/PaymentMethodList.tsx +++ b/src/pages/settings/Wallet/PaymentMethodList.tsx @@ -36,7 +36,7 @@ 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'; +import type {FormattedSelectedPaymentMethodIcon} from './WalletPage/types'; type PaymentMethodListOnyxProps = { /** List of bank accounts */ @@ -99,7 +99,14 @@ type PaymentMethodListProps = PaymentMethodListOnyxProps & { shouldShowEmptyListMessage?: boolean; /** What to do when a menu item is pressed */ - onPress: (event?: GestureResponderEvent | KeyboardEvent, accountType?: string, accountData?: AccountData, icon?: IconAsset, isDefault?: boolean, methodID?: number) => void; + onPress: ( + event?: GestureResponderEvent | KeyboardEvent, + accountType?: string, + accountData?: AccountData, + icon?: FormattedSelectedPaymentMethodIcon, + isDefault?: boolean, + methodID?: number, + ) => void; }; type PaymentMethodItem = PaymentMethod & { @@ -236,12 +243,25 @@ function PaymentMethodList({ (paymentMethod) => paymentMethod.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || !isEmptyObject(paymentMethod.errors), ); } - combinedPaymentMethods = combinedPaymentMethods.map((paymentMethod) => { const isMethodActive = isPaymentMethodActive(actionPaymentMethodType, activePaymentMethodID, paymentMethod); return { ...paymentMethod, - onPress: (e: GestureResponderEvent) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.icon, paymentMethod.isDefault, paymentMethod.methodID), + onPress: (e: GestureResponderEvent) => + onPress( + e, + paymentMethod.accountType, + paymentMethod.accountData, + { + icon: paymentMethod.icon, + iconHeight: paymentMethod?.iconHeight, + iconWidth: paymentMethod?.iconWidth, + iconStyles: paymentMethod?.iconStyles, + iconSize: paymentMethod?.iconSize, + }, + paymentMethod.isDefault, + paymentMethod.methodID, + ), wrapperStyle: isMethodActive ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, isMethodActive, diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx index 13e2877d3ec7..b9f49049d51a 100644 --- a/src/pages/settings/Wallet/WalletPage/WalletPage.tsx +++ b/src/pages/settings/Wallet/WalletPage/WalletPage.tsx @@ -37,12 +37,11 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {AccountData} from '@src/types/onyx'; -import type IconAsset from '@src/types/utils/IconAsset'; -import type {WalletPageOnyxProps, WalletPageProps} from './types'; +import type {FormattedSelectedPaymentMethodIcon, WalletPageOnyxProps, WalletPageProps} from './types'; type FormattedSelectedPaymentMethod = { title: string; - icon?: IconAsset; + icon?: FormattedSelectedPaymentMethodIcon; description?: string; type?: string; }; @@ -151,7 +150,7 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi nativeEvent?: GestureResponderEvent | KeyboardEvent, accountType?: string, account?: AccountData, - icon?: IconAsset, + icon?: FormattedSelectedPaymentMethodIcon, isDefault?: boolean, methodID?: string | number, ) => { @@ -538,10 +537,14 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi {isPopoverBottomMount && ( )} {shouldShowMakeDefaultButton && ( diff --git a/src/pages/settings/Wallet/WalletPage/types.ts b/src/pages/settings/Wallet/WalletPage/types.ts index 0c3db1a2df65..ffee0c677c33 100644 --- a/src/pages/settings/Wallet/WalletPage/types.ts +++ b/src/pages/settings/Wallet/WalletPage/types.ts @@ -1,5 +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 */ @@ -28,4 +30,12 @@ type WalletPageProps = WalletPageOnyxProps & { shouldListenForResize?: boolean; }; -export type {WalletPageOnyxProps, WalletPageProps}; +type FormattedSelectedPaymentMethodIcon = { + icon: IconAsset; + iconHeight?: number; + iconWidth?: number; + iconStyles?: ViewStyle[]; + iconSize?: number; +}; + +export type {WalletPageOnyxProps, WalletPageProps, FormattedSelectedPaymentMethodIcon};