diff --git a/app/components/UI/Earn/constants/musd.ts b/app/components/UI/Earn/constants/musd.ts index d19310c1089..a3eaa6b86e2 100644 --- a/app/components/UI/Earn/constants/musd.ts +++ b/app/components/UI/Earn/constants/musd.ts @@ -2,7 +2,7 @@ * mUSD Conversion Constants for Earn namespace */ -import { CHAIN_IDS, TransactionType } from '@metamask/transaction-controller'; +import { CHAIN_IDS } from '@metamask/transaction-controller'; import { Hex } from '@metamask/utils'; import { NETWORKS_CHAIN_ID } from '../../../../constants/network'; @@ -52,8 +52,3 @@ export const CONVERTIBLE_STABLECOINS_BY_CHAIN: Record = (() => { } return result; })(); - -// TODO: Remove this once we add to TransactionType. Requires updating transaction-controller package. -// Similar to a swap except that output token is predetermined (e.g. mUSD) and the user cannot change it. -export const MUSD_CONVERSION_TRANSACTION_TYPE = - 'mUSDConversion' as TransactionType; diff --git a/app/components/UI/Earn/hooks/useMusdConversion.test.ts b/app/components/UI/Earn/hooks/useMusdConversion.test.ts index 2e91d08f675..552b4ba21ec 100644 --- a/app/components/UI/Earn/hooks/useMusdConversion.test.ts +++ b/app/components/UI/Earn/hooks/useMusdConversion.test.ts @@ -6,13 +6,13 @@ import { import Engine from '../../../../core/Engine'; import Logger from '../../../../util/Logger'; import { generateTransferData } from '../../../../util/transactions'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../constants/musd'; import { MMM_ORIGIN } from '../../../Views/confirmations/constants/confirmations'; import Routes from '../../../../constants/navigation/Routes'; import { ConfirmationLoader } from '../../../Views/confirmations/components/confirm/confirm-component'; import { Hex } from '@metamask/utils'; import { useNavigation } from '@react-navigation/native'; import { useSelector } from 'react-redux'; +import { TransactionType } from '@metamask/transaction-controller'; // Mock all external dependencies jest.mock('../../../../core/Engine'); @@ -160,7 +160,8 @@ describe('useMusdConversion', () => { { networkClientId: 'mainnet', origin: MMM_ORIGIN, - type: MUSD_CONVERSION_TRANSACTION_TYPE, + skipInitialGasEstimate: true, + type: TransactionType.musdConversion, nestedTransactions: [ { to: mockConfig.outputToken.address, diff --git a/app/components/UI/Earn/hooks/useMusdConversion.ts b/app/components/UI/Earn/hooks/useMusdConversion.ts index 2c3e5c6a751..183d621e434 100644 --- a/app/components/UI/Earn/hooks/useMusdConversion.ts +++ b/app/components/UI/Earn/hooks/useMusdConversion.ts @@ -4,13 +4,13 @@ import { useSelector } from 'react-redux'; import Engine from '../../../../core/Engine'; import Logger from '../../../../util/Logger'; import { generateTransferData } from '../../../../util/transactions'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../constants/musd'; import { MMM_ORIGIN } from '../../../Views/confirmations/constants/confirmations'; import { useNavigation } from '@react-navigation/native'; import Routes from '../../../../constants/navigation/Routes'; import { ConfirmationLoader } from '../../../Views/confirmations/components/confirm/confirm-component'; import { EVM_SCOPE } from '../constants/networks'; import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts'; +import { TransactionType } from '@metamask/transaction-controller'; /** * Type guard to validate allowedPaymentTokens structure. @@ -161,45 +161,57 @@ export const useMusdConversion = () => { }, }); - const ZERO_HEX_VALUE = '0x0'; + try { + const ZERO_HEX_VALUE = '0x0'; - /** - * Create minimal transfer data with amount = 0 - * The actual amount will be set by the user on the confirmation screen - */ - const transferData = generateTransferData('transfer', { - toAddress: selectedAddress, - amount: ZERO_HEX_VALUE, - }); + /** + * Create minimal transfer data with amount = 0 + * The actual amount will be set by the user on the confirmation screen + */ + const transferData = generateTransferData('transfer', { + toAddress: selectedAddress, + amount: ZERO_HEX_VALUE, + }); - const { TransactionController } = Engine.context; + const { TransactionController } = Engine.context; - const { transactionMeta } = await TransactionController.addTransaction( - { - to: outputToken.address, - from: selectedAddress, - data: transferData, - value: ZERO_HEX_VALUE, - chainId: outputToken.chainId, - }, - { - networkClientId, - origin: MMM_ORIGIN, - type: MUSD_CONVERSION_TRANSACTION_TYPE, - // Important: Nested transaction is required for Relay to work. This will be fixed in a future iteration. - nestedTransactions: [ + const { transactionMeta } = + await TransactionController.addTransaction( { to: outputToken.address, - data: transferData as Hex, + from: selectedAddress, + data: transferData, value: ZERO_HEX_VALUE, + chainId: outputToken.chainId, }, - ], - }, - ); + { + /** + * Calculate gas estimate asynchronously. + * Enabling this reduces our first paint time on the mUSD conversion screen by ~500ms. + */ + skipInitialGasEstimate: true, + networkClientId, + origin: MMM_ORIGIN, + type: TransactionType.musdConversion, + // Important: Nested transaction is required for Relay to work. This will be fixed in a future iteration. + nestedTransactions: [ + { + to: outputToken.address, + data: transferData as Hex, + value: ZERO_HEX_VALUE, + }, + ], + }, + ); - const newTransactionId = transactionMeta.id; + const newTransactionId = transactionMeta.id; - return newTransactionId; + return newTransactionId; + } catch (err) { + // Prevent the user from being stuck on the confirmation screen without a transaction. + navigation.goBack(); + throw err; + } } catch (err) { const errorMessage = err instanceof Error @@ -213,9 +225,6 @@ export const useMusdConversion = () => { setError(errorMessage); - // Prevent user from being stuck on confirmation screen without a transaction. - navigation.goBack(); - throw err; } }, diff --git a/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts b/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts index 4f0cbf703ef..39b32092c19 100644 --- a/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts +++ b/app/components/UI/Earn/hooks/useMusdConversionStatus.test.ts @@ -1,12 +1,12 @@ import { TransactionMeta, TransactionStatus, + TransactionType, } from '@metamask/transaction-controller'; import { renderHook } from '@testing-library/react-hooks'; import Engine from '../../../../core/Engine'; import { useMusdConversionStatus } from './useMusdConversionStatus'; import useEarnToasts, { EarnToastOptionsConfig } from './useEarnToasts'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../constants/musd'; import { ToastVariants } from '../../../../component-library/components/Toast/Toast.types'; import { IconName } from '../../../../component-library/components/Icons/Icon'; import { NotificationFeedbackType } from 'expo-haptics'; @@ -90,7 +90,7 @@ describe('useMusdConversionStatus', () => { const createTransactionMeta = ( status: TransactionStatus, transactionId = 'test-transaction-1', - type = MUSD_CONVERSION_TRANSACTION_TYPE, + type = TransactionType.musdConversion, ): TransactionMeta => ({ id: transactionId, status, @@ -356,7 +356,7 @@ describe('useMusdConversionStatus', () => { const transactionMeta = createTransactionMeta( TransactionStatus.submitted, 'test-transaction-5', - 'contractInteraction' as typeof MUSD_CONVERSION_TRANSACTION_TYPE, + 'contractInteraction' as typeof TransactionType.musdConversion, ); handler({ transactionMeta }); @@ -371,7 +371,7 @@ describe('useMusdConversionStatus', () => { const transactionMeta = createTransactionMeta( TransactionStatus.confirmed, 'test-transaction-6', - 'swap' as typeof MUSD_CONVERSION_TRANSACTION_TYPE, + 'swap' as typeof TransactionType.musdConversion, ); handler({ transactionMeta }); @@ -386,7 +386,7 @@ describe('useMusdConversionStatus', () => { const transactionMeta = createTransactionMeta( TransactionStatus.failed, 'test-transaction-7', - 'simpleSend' as typeof MUSD_CONVERSION_TRANSACTION_TYPE, + 'simpleSend' as typeof TransactionType.musdConversion, ); handler({ transactionMeta }); diff --git a/app/components/UI/Earn/hooks/useMusdConversionStatus.ts b/app/components/UI/Earn/hooks/useMusdConversionStatus.ts index af5ae338224..e313c3b4bee 100644 --- a/app/components/UI/Earn/hooks/useMusdConversionStatus.ts +++ b/app/components/UI/Earn/hooks/useMusdConversionStatus.ts @@ -1,12 +1,11 @@ import { TransactionMeta, TransactionStatus, + TransactionType, } from '@metamask/transaction-controller'; import { useEffect, useRef } from 'react'; import Engine from '../../../../core/Engine'; import useEarnToasts from './useEarnToasts'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../constants/musd'; - /** * Hook to monitor mUSD conversion transaction status and show appropriate toasts * @@ -33,7 +32,7 @@ export const useMusdConversionStatus = () => { }: { transactionMeta: TransactionMeta; }) => { - if (transactionMeta.type !== MUSD_CONVERSION_TRANSACTION_TYPE) { + if (transactionMeta.type !== TransactionType.musdConversion) { return; } diff --git a/app/components/UI/Earn/routes/index.tsx b/app/components/UI/Earn/routes/index.tsx index fc0d81938c2..a29ff8e1d9b 100644 --- a/app/components/UI/Earn/routes/index.tsx +++ b/app/components/UI/Earn/routes/index.tsx @@ -32,8 +32,7 @@ const EarnScreenStack = () => ( name={Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS} component={Confirm} options={{ - title: '', - headerShown: true, + headerShown: false, }} /> diff --git a/app/components/UI/Tokens/TokenList/TokenListItem/TokenListItemBip44.tsx b/app/components/UI/Tokens/TokenList/TokenListItem/TokenListItemBip44.tsx index faff8e6ae39..a2cfb8af49b 100644 --- a/app/components/UI/Tokens/TokenList/TokenListItem/TokenListItemBip44.tsx +++ b/app/components/UI/Tokens/TokenList/TokenListItem/TokenListItemBip44.tsx @@ -51,6 +51,7 @@ interface TokenListItemProps { setShowScamWarningModal: (arg: boolean) => void; privacyMode: boolean; showPercentageChange?: boolean; + isFullView?: boolean; } export const TokenListItemBip44 = React.memo( @@ -60,6 +61,7 @@ export const TokenListItemBip44 = React.memo( setShowScamWarningModal, privacyMode, showPercentageChange = true, + isFullView = false, }: TokenListItemProps) => { const { trackEvent, createEventBuilder } = useMetrics(); const navigation = useNavigation(); @@ -148,7 +150,7 @@ export const TokenListItemBip44 = React.memo( trackEvent( createEventBuilder(MetaMetricsEvents.TOKEN_DETAILS_OPENED) .addProperties({ - source: 'mobile-token-list', + source: isFullView ? 'mobile-token-list-page' : 'mobile-token-list', chain_id: token.chainId, token_symbol: token.symbol, }) diff --git a/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx b/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx index 06dd50998a5..073c05b9944 100644 --- a/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx +++ b/app/components/UI/Tokens/TokenList/TokenListItem/index.tsx @@ -89,6 +89,7 @@ interface TokenListItemProps { setShowScamWarningModal: (arg: boolean) => void; privacyMode: boolean; showPercentageChange?: boolean; + isFullView?: boolean; } export const TokenListItem = React.memo( @@ -98,6 +99,7 @@ export const TokenListItem = React.memo( setShowScamWarningModal, privacyMode, showPercentageChange = true, + isFullView = false, }: TokenListItemProps) => { const { trackEvent, createEventBuilder } = useMetrics(); const navigation = useNavigation(); @@ -346,7 +348,7 @@ export const TokenListItem = React.memo( trackEvent( createEventBuilder(MetaMetricsEvents.TOKEN_DETAILS_OPENED) .addProperties({ - source: 'mobile-token-list', + source: isFullView ? 'mobile-token-list-page' : 'mobile-token-list', chain_id: token.chainId, token_symbol: token.symbol, }) diff --git a/app/components/UI/Tokens/TokenList/index.tsx b/app/components/UI/Tokens/TokenList/index.tsx index 08f547a700f..f794a244359 100644 --- a/app/components/UI/Tokens/TokenList/index.tsx +++ b/app/components/UI/Tokens/TokenList/index.tsx @@ -100,6 +100,7 @@ const TokenListComponent = ({ setShowScamWarningModal={setShowScamWarningModal} privacyMode={privacyMode} showPercentageChange={showPercentageChange} + isFullView={isFullView} /> ), [ @@ -108,6 +109,7 @@ const TokenListComponent = ({ privacyMode, showPercentageChange, TokenListItemComponent, + isFullView, ], ); @@ -125,6 +127,7 @@ const TokenListComponent = ({ setShowScamWarningModal={setShowScamWarningModal} privacyMode={privacyMode} showPercentageChange={showPercentageChange} + isFullView={isFullView} /> ))} {shouldShowViewAllButton && ( diff --git a/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.test.tsx b/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.test.tsx index 468c8277352..f8a07544ac8 100644 --- a/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.test.tsx +++ b/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.test.tsx @@ -8,6 +8,7 @@ import { RootState } from '../../../../reducers'; import { MultichainAccountPermissions } from './MultichainAccountPermissions'; import Engine from '../../../../core/Engine'; import { MAINNET_DISPLAY_NAME } from '../../../../core/Engine/constants'; +import { getNetworkImageSource } from '../../../../util/networks'; const mockedNavigate = jest.fn(); const mockedGoBack = jest.fn(); @@ -466,6 +467,47 @@ describe('MultichainAccountPermissions', () => { }); }); + describe('networkAvatars', () => { + it('renders successfully and filters wallet scopes when creating network avatars', () => { + // Arrange + const mockGetNetworkImageSource = + getNetworkImageSource as jest.MockedFunction< + typeof getNetworkImageSource + >; + mockGetNetworkImageSource.mockClear(); + + // Act - Render the component + const { getByTestId } = renderWithProvider( + , + { state: mockInitialState() }, + ); + + // Assert - Component renders successfully without crashing + expect(getByTestId('cancel-button')).toBeDefined(); + expect( + getByTestId('navigate_to_edit_networks_permissions_button'), + ).toBeDefined(); + + // If getNetworkImageSource was called, verify no wallet scopes were passed + const calls = mockGetNetworkImageSource.mock.calls; + calls.forEach((call) => { + const params = call[0]; + if (params?.chainId) { + // The filter should exclude wallet scopes like 'wallet:eip155' + expect(params.chainId).not.toMatch(/^wallet:/); + // Should only be valid CAIP chain IDs + expect(params.chainId).toMatch(/^[a-z]+:\d+$/); + } + }); + }); + }); + describe('screen navigation', () => { it('should render correct screen based on current state', () => { const { getByTestId } = renderWithProvider( diff --git a/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.tsx b/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.tsx index c118c7716ad..3b291d6ea27 100644 --- a/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.tsx +++ b/app/components/Views/MultichainAccounts/MultichainAccountPermissions/MultichainAccountPermissions.tsx @@ -25,6 +25,7 @@ import { parseCaipAccountId, hasProperty, KnownCaipNamespace, + isCaipChainId, } from '@metamask/utils'; import { parseChainId } from '@walletconnect/utils'; import { NetworkConfiguration } from '@metamask/network-controller'; @@ -122,13 +123,22 @@ export const MultichainAccountPermissions = ( const networkAvatars: NetworkAvatarProps[] = useMemo( () => - selectedChainIds.map((selectedChainId) => ({ - size: AvatarSize.Xs, - name: networkConfigurations[selectedChainId]?.name || '', - imageSource: getNetworkImageSource({ chainId: selectedChainId }), - variant: AvatarVariant.Network, - caipChainId: selectedChainId, - })), + selectedChainIds + // TODO: Remove this filter once upstream issue is fixed + // selectedChainIds is populated by getAllScopesFromCaip25CaveatValue() from + // @metamask/chain-agnostic-permission, which incorrectly includes wallet scopes + // like 'wallet:eip155' that are not valid chain IDs. + // For now, filter to only include valid CAIP chain IDs, excluding wallet scopes. + .filter( + (chainId) => isCaipChainId(chainId) && !chainId.startsWith('wallet:'), + ) + .map((selectedChainId) => ({ + size: AvatarSize.Xs, + name: networkConfigurations[selectedChainId]?.name || '', + imageSource: getNetworkImageSource({ chainId: selectedChainId }), + variant: AvatarVariant.Network, + caipChainId: selectedChainId, + })), [networkConfigurations, selectedChainIds], ); diff --git a/app/components/Views/confirmations/components/footer/footer.tsx b/app/components/Views/confirmations/components/footer/footer.tsx index c65d5e63322..ffc932a9caf 100644 --- a/app/components/Views/confirmations/components/footer/footer.tsx +++ b/app/components/Views/confirmations/components/footer/footer.tsx @@ -38,14 +38,13 @@ import { import { hasTransactionType } from '../../utils/transaction'; import { PredictClaimFooter } from '../predict-confirmations/predict-claim-footer/predict-claim-footer'; import { useIsTransactionPayLoading } from '../../hooks/pay/useTransactionPayData'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../../../../UI/Earn/constants/musd'; import { Skeleton } from '../../../../../component-library/components/Skeleton'; const HIDE_FOOTER_BY_DEFAULT_TYPES = [ TransactionType.perpsDeposit, TransactionType.predictDeposit, TransactionType.predictWithdraw, - MUSD_CONVERSION_TRANSACTION_TYPE, + TransactionType.musdConversion, ]; export const Footer = () => { diff --git a/app/components/Views/confirmations/components/info-root/info-root.tsx b/app/components/Views/confirmations/components/info-root/info-root.tsx index 4d0d5bbee62..85cd6e2d29f 100644 --- a/app/components/Views/confirmations/components/info-root/info-root.tsx +++ b/app/components/Views/confirmations/components/info-root/info-root.tsx @@ -25,7 +25,6 @@ import { hasTransactionType } from '../../utils/transaction'; import { PredictClaimInfo } from '../info/predict-claim-info'; import { PredictWithdrawInfo } from '../info/predict-withdraw-info'; import { MusdConversionInfo } from '../info/musd-conversion-info'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../../../../UI/Earn/constants/musd'; interface ConfirmationInfoComponentRequest { signatureRequestVersion?: string; @@ -95,7 +94,7 @@ const Info = ({ route }: InfoProps) => { if ( transactionMetadata && - hasTransactionType(transactionMetadata, [MUSD_CONVERSION_TRANSACTION_TYPE]) + hasTransactionType(transactionMetadata, [TransactionType.musdConversion]) ) { return ; } diff --git a/app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx b/app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx index 7b23424cc36..572648507f0 100644 --- a/app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx +++ b/app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx @@ -48,7 +48,6 @@ import Button, { } from '../../../../../../component-library/components/Buttons/Button'; import { useAlerts } from '../../../context/alert-system-context'; import { useTransactionConfirm } from '../../../hooks/transactions/useTransactionConfirm'; -import { MUSD_CONVERSION_TRANSACTION_TYPE } from '../../../../../UI/Earn/constants/musd'; export interface CustomAmountInfoProps { children?: ReactNode; @@ -266,7 +265,7 @@ function useButtonLabel() { return strings('confirm.deposit_edit_amount_predict_withdraw'); } - if (hasTransactionType(transaction, [MUSD_CONVERSION_TRANSACTION_TYPE])) { + if (hasTransactionType(transaction, [TransactionType.musdConversion])) { return strings('earn.musd_conversion.confirmation_button'); } diff --git a/app/components/Views/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx b/app/components/Views/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx index 7b920c832ec..a1fbe0247ba 100644 --- a/app/components/Views/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx +++ b/app/components/Views/confirmations/components/info/musd-conversion-info/musd-conversion-info.tsx @@ -21,7 +21,7 @@ export const MusdConversionInfo = () => { useEffect(() => { if (!outputTokenInfo) { console.error( - '[Token Conversion] outputToken is required but was not provided in route params. Navigating back.', + '[mUSD Conversion] outputToken is required but was not provided in route params. Navigating back.', ); navigation.goBack(); } diff --git a/app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx b/app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx index 26526c7ed5b..360f92b9ecb 100644 --- a/app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx +++ b/app/components/Views/confirmations/components/modals/pay-with-modal/pay-with-modal.tsx @@ -43,7 +43,11 @@ export function PayWithModal() { ); return ( - + {strings('pay_with_modal.title')} diff --git a/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.styles.ts b/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.styles.ts index bcf46f8d070..2bd46b0a5f1 100644 --- a/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.styles.ts +++ b/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.styles.ts @@ -1,6 +1,5 @@ import { StyleSheet } from 'react-native'; import { Theme } from '../../../../../../util/theme/models'; -import { lightTheme } from '@metamask/design-tokens'; const styleSheet = (params: { theme: Theme }) => StyleSheet.create({ @@ -23,12 +22,6 @@ const styleSheet = (params: { theme: Theme }) => bottom: { textAlign: 'center', }, - - button: { - width: '100%', - height: 48, - backgroundColor: lightTheme.colors.primary.default, - }, }); export default styleSheet; diff --git a/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.tsx b/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.tsx index 95dd0ed8e6b..0a23df76696 100644 --- a/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.tsx +++ b/app/components/Views/confirmations/components/predict-confirmations/predict-claim-footer/predict-claim-footer.tsx @@ -6,9 +6,6 @@ import Avatar, { AvatarVariant, } from '../../../../../../component-library/components/Avatars/Avatar'; import AvatarGroup from '../../../../../../component-library/components/Avatars/AvatarGroup'; -import Button, { - ButtonVariants, -} from '../../../../../../component-library/components/Buttons/Button'; import Text, { TextColor, TextVariant, @@ -23,6 +20,8 @@ import { PredictPosition } from '../../../../../UI/Predict'; import { AlignItems, FlexDirection } from '../../../../../UI/Box/box.types'; import useFiatFormatter from '../../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter'; import { BigNumber } from 'bignumber.js'; +import ButtonHero from '../../../../../../component-library/components-temp/Buttons/ButtonHero'; +import { ButtonBaseSize } from '@metamask/design-system-react-native'; export interface PredictClaimFooterProps { onPress: () => void; @@ -51,15 +50,14 @@ export function PredictClaimFooter({ onPress }: PredictClaimFooterProps) { ) : ( )} -