From aa2970e5d08e58a3fb3f06a843afecd2bdcc98b3 Mon Sep 17 00:00:00 2001 From: Brian Nguyen Date: Mon, 13 Jul 2026 10:51:28 -0700 Subject: [PATCH] Aligned more section across wallet and perps --- .../MoneyMoreSheet/MoneyMoreSheet.tsx | 2 +- app/components/UI/Perps/Perps.testIds.ts | 1 + .../PerpsHomeView/PerpsHomeView.test.tsx | 23 +- .../Views/PerpsHomeView/PerpsHomeView.tsx | 24 +- .../PerpsMarketDetailsView.tsx | 27 +- .../PerpsMoreSection.styles.ts | 18 ++ .../PerpsMoreSection.test.tsx | 66 +++++ .../PerpsMoreSection.testIds.ts | 3 + .../PerpsMoreSection/PerpsMoreSection.tsx | 95 +++++++ .../components/PerpsMoreSection/index.ts | 2 + .../PerpsNavigationCard.styles.ts | 31 --- .../PerpsNavigationCard.test.tsx | 257 ------------------ .../PerpsNavigationCard.tsx | 117 -------- .../components/PerpsNavigationCard/index.ts | 1 - .../Modals/SettingsModal/SettingsModal.tsx | 2 +- .../Views/AccountsMenu/AccountsMenu.tsx | 4 +- .../Homepage/Sections/More/MoreSection.tsx | 3 +- 17 files changed, 232 insertions(+), 444 deletions(-) create mode 100644 app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.styles.ts create mode 100644 app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.test.tsx create mode 100644 app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.testIds.ts create mode 100644 app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.tsx create mode 100644 app/components/UI/Perps/components/PerpsMoreSection/index.ts delete mode 100644 app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.styles.ts delete mode 100644 app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.test.tsx delete mode 100644 app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.tsx delete mode 100644 app/components/UI/Perps/components/PerpsNavigationCard/index.ts diff --git a/app/components/UI/Money/components/MoneyMoreSheet/MoneyMoreSheet.tsx b/app/components/UI/Money/components/MoneyMoreSheet/MoneyMoreSheet.tsx index 9a0e4dbc965..8f9ddb08afa 100644 --- a/app/components/UI/Money/components/MoneyMoreSheet/MoneyMoreSheet.tsx +++ b/app/components/UI/Money/components/MoneyMoreSheet/MoneyMoreSheet.tsx @@ -104,7 +104,7 @@ const MoneyMoreSheet = () => { }, { label: strings('money.more_sheet.contact_support'), - icon: IconName.MessageQuestion, + icon: IconName.Sms, onPress: handleContactSupport, testID: MoneyMoreSheetTestIds.CONTACT_SUPPORT_OPTION, }, diff --git a/app/components/UI/Perps/Perps.testIds.ts b/app/components/UI/Perps/Perps.testIds.ts index 61cf48fa2af..943a3b51030 100644 --- a/app/components/UI/Perps/Perps.testIds.ts +++ b/app/components/UI/Perps/Perps.testIds.ts @@ -417,6 +417,7 @@ export const PerpsMarketDetailsViewSelectorsIDs = { OPEN_INTEREST_INFO_ICON: 'perps-market-details-open-interest-info-icon', FUNDING_RATE_INFO_ICON: 'perps-market-details-funding-rate-info-icon', BOTTOM_SHEET_TOOLTIP: 'perps-market-details-bottom-sheet-tooltip', + MORE_SECTION: 'perps-market-details-more-section', GEO_BLOCK_BOTTOM_SHEET_TOOLTIP: 'perps-market-details-geo-block-bottom-sheet-tooltip', MARKET_HOURS_BANNER: 'perps-market-hours-banner', diff --git a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx index 85c79c6febd..dadc529b205 100644 --- a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx +++ b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx @@ -369,18 +369,21 @@ jest.mock( }, ); jest.mock('../../components/PerpsCard', () => 'PerpsCard'); -jest.mock('../../components/PerpsNavigationCard/PerpsNavigationCard', () => { +jest.mock('../../components/PerpsMoreSection', () => { const { View, TouchableOpacity, Text } = jest.requireActual('react-native'); return { __esModule: true, - default: function MockPerpsNavigationCard({ + default: function MockPerpsMoreSection({ items, + testID, }: { items: { label: string; onPress: () => void; testID?: string }[]; + testID?: string; }) { return ( - + + More {items.map( ( item: { label: string; onPress: () => void; testID?: string }, @@ -783,16 +786,14 @@ describe('PerpsHomeView', () => { }); // Note: PerpsHomeView does not render a bottom tab bar - // The component uses PerpsNavigationCard for navigation instead - it('renders navigation card', () => { - // Arrange & Act - const { getByTestId } = render(); + // The component uses PerpsMoreSection for footer actions + it('renders more section', () => { + const { getByTestId, getByText } = render(); - // Assert - Verify navigation card is rendered (if it has a testID) - // Or just verify component renders without error - // The navigation card is tested separately + expect(getByText('More')).toBeTruthy(); + expect(getByTestId(PerpsHomeViewSelectorsIDs.SUPPORT_BUTTON)).toBeTruthy(); expect( - getByTestId(PerpsHomeViewSelectorsIDs.BACK_HOME_BUTTON), + getByTestId(PerpsHomeViewSelectorsIDs.LEARN_MORE_BUTTON), ).toBeTruthy(); }); diff --git a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx index ceda24a063e..69901284999 100644 --- a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx +++ b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx @@ -113,9 +113,9 @@ import { import PerpsCloseAllPositionsView from '../PerpsCloseAllPositionsView/PerpsCloseAllPositionsView'; import PerpsCancelAllOrdersView from '../PerpsCancelAllOrdersView/PerpsCancelAllOrdersView'; import { BottomSheetRef } from '../../../../../component-library/components/BottomSheets/BottomSheet'; -import PerpsNavigationCard, { - NavigationItem, -} from '../../components/PerpsNavigationCard/PerpsNavigationCard'; +import PerpsMoreSection, { + type PerpsMoreItem, +} from '../../components/PerpsMoreSection'; import PerpsServiceInterruptionBanner from '../../components/PerpsServiceInterruptionBanner'; import PerpsCompetitionBanner from '../../components/PerpsCompetitionBanner'; import PerpsProducts from '../../components/PerpsProducts'; @@ -619,19 +619,20 @@ const PerpsHomeView = ({ }); }, [trackEvent, createEventBuilder, navigation]); - const navigationItems: NavigationItem[] = useMemo(() => { - const items: NavigationItem[] = [ + const moreItems: PerpsMoreItem[] = useMemo(() => { + const items: PerpsMoreItem[] = [ { label: strings(SUPPORT_CONFIG.TitleKey), + startIconName: IconName.Sms, onPress: () => navigateToContactSupport(), testID: PerpsHomeViewSelectorsIDs.SUPPORT_BUTTON, }, ]; - // Add feedback button when feature flag is enabled if (isFeedbackEnabled) { items.push({ label: strings(FEEDBACK_CONFIG.TitleKey), + startIconName: IconName.Mail, onPress: handleGiveFeedback, testID: PerpsHomeViewSelectorsIDs.FEEDBACK_BUTTON, }); @@ -639,6 +640,7 @@ const PerpsHomeView = ({ items.push({ label: strings(LEARN_MORE_CONFIG.TitleKey), + startIconName: IconName.Book, onPress: () => navigtateToTutorial(), testID: PerpsHomeViewSelectorsIDs.LEARN_MORE_BUTTON, }); @@ -899,6 +901,11 @@ const PerpsHomeView = ({ /> ), }, + { + key: 'more', + visible: true, + content: , + }, ], [ isLoading, @@ -933,6 +940,7 @@ const PerpsHomeView = ({ sortBy, recentActivity, handleSectionLayout, + moreItems, ], ); @@ -1141,10 +1149,6 @@ const PerpsHomeView = ({ - - - - {/* Bottom spacing for tab bar */} diff --git a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx index 9418bb15d49..ed057109974 100644 --- a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx +++ b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx @@ -5,6 +5,7 @@ import { ButtonSemanticSeverity, ButtonVariant, ButtonSize as ButtonSizeRNDesignSystem, + IconName, Text, TextColor, TextVariant, @@ -63,9 +64,9 @@ import PerpsMarketInlineHeader from '../../components/PerpsMarketInlineHeader'; import PerpsMarketHoursBanner from '../../components/PerpsMarketHoursBanner'; import PerpsMarketStatisticsCard from '../../components/PerpsMarketStatisticsCard'; import PerpsMarketTradesList from '../../components/PerpsMarketTradesList'; -import PerpsNavigationCard, { - type NavigationItem, -} from '../../components/PerpsNavigationCard/PerpsNavigationCard'; +import PerpsMoreSection, { + type PerpsMoreItem, +} from '../../components/PerpsMoreSection'; import PerpsNotificationTooltip from '../../components/PerpsNotificationTooltip'; import PerpsOHLCVBar from '../../components/PerpsOHLCVBar'; import PerpsOICapWarning from '../../components/PerpsOICapWarning'; @@ -1277,10 +1278,11 @@ const PerpsMarketDetailsView: React.FC = () => { ); // Define navigation items for the card - const navigationItems: NavigationItem[] = useMemo( + const moreItems: PerpsMoreItem[] = useMemo( () => [ { label: strings('perps.tutorial.card.title'), + startIconName: IconName.Book, onPress: () => navigateToTutorial(), testID: PerpsTutorialSelectorsIDs.TUTORIAL_CARD, }, @@ -1403,6 +1405,16 @@ const PerpsMarketDetailsView: React.FC = () => { ) : null, }, + { + key: 'more', + visible: moreItems.length > 0, + content: ( + + ), + }, ], [ market, @@ -1411,6 +1423,7 @@ const PerpsMarketDetailsView: React.FC = () => { isOrderBookEnabled, handleOrderBookPress, isRelatedMarketsVisible, + moreItems, ], ); @@ -1605,12 +1618,6 @@ const PerpsMarketDetailsView: React.FC = () => { - {navigationItems.length > 0 ? ( - - - - ) : null} - { + const mockOnPressSupport = jest.fn(); + const mockOnPressLearn = jest.fn(); + + const items: PerpsMoreItem[] = [ + { + label: 'Contact support', + startIconName: IconName.Sms, + onPress: mockOnPressSupport, + testID: 'perps-more-support-button', + }, + { + label: 'Learn the basics of perps', + startIconName: IconName.Book, + onPress: mockOnPressLearn, + testID: 'perps-more-learn-button', + }, + ]; + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('renders the More section title and items', () => { + render(); + + expect(screen.getByText('More')).toBeOnTheScreen(); + expect(screen.getByText('Contact support')).toBeOnTheScreen(); + expect(screen.getByText('Learn the basics of perps')).toBeOnTheScreen(); + expect( + screen.getByTestId(PerpsMoreSectionTestIds.SECTION), + ).toBeOnTheScreen(); + }); + + it('calls onPress when an item is pressed', () => { + render(); + + fireEvent.press(screen.getByTestId('perps-more-support-button')); + fireEvent.press(screen.getByTestId('perps-more-learn-button')); + + expect(mockOnPressSupport).toHaveBeenCalledTimes(1); + expect(mockOnPressLearn).toHaveBeenCalledTimes(1); + }); + + it('renders end icon when provided', () => { + const itemsWithEndIcon: PerpsMoreItem[] = [ + { + label: 'Contact support', + startIconName: IconName.Sms, + endIconName: IconName.Export, + onPress: mockOnPressSupport, + testID: 'perps-more-support-button', + }, + ]; + + render(); + + expect(screen.getByText('Contact support')).toBeOnTheScreen(); + }); +}); diff --git a/app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.testIds.ts b/app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.testIds.ts new file mode 100644 index 00000000000..b4a44e0989a --- /dev/null +++ b/app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.testIds.ts @@ -0,0 +1,3 @@ +export const PerpsMoreSectionTestIds = { + SECTION: 'perps-more-section', +}; diff --git a/app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.tsx b/app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.tsx new file mode 100644 index 00000000000..c0c4d372c4f --- /dev/null +++ b/app/components/UI/Perps/components/PerpsMoreSection/PerpsMoreSection.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { TouchableOpacity, View } from 'react-native'; +import { + FontWeight, + Icon, + IconColor, + IconName, + IconSize, + SectionHeader, + Text, + TextColor, + TextVariant, +} from '@metamask/design-system-react-native'; +import { strings } from '../../../../../../locales/i18n'; +import styles from './PerpsMoreSection.styles'; +import { PerpsMoreSectionTestIds } from './PerpsMoreSection.testIds'; + +export interface PerpsMoreItem { + label: string; + startIconName: IconName; + endIconName?: IconName; + onPress: () => void; + testID: string; +} + +interface PerpsMoreSectionProps { + items: PerpsMoreItem[]; + testID?: string; +} + +interface PerpsMoreActionRowProps { + label: string; + startIconName: IconName; + endIconName?: IconName; + onPress: () => void; + testID: string; +} + +const PerpsMoreActionRow = ({ + label, + startIconName, + endIconName, + onPress, + testID, +}: PerpsMoreActionRowProps) => ( + + + + {label} + + {endIconName ? ( + + ) : null} + +); + +const PerpsMoreSection = ({ + items, + testID = PerpsMoreSectionTestIds.SECTION, +}: PerpsMoreSectionProps) => ( + + + {items.map((item) => ( + + ))} + +); + +export default PerpsMoreSection; diff --git a/app/components/UI/Perps/components/PerpsMoreSection/index.ts b/app/components/UI/Perps/components/PerpsMoreSection/index.ts new file mode 100644 index 00000000000..a780109a528 --- /dev/null +++ b/app/components/UI/Perps/components/PerpsMoreSection/index.ts @@ -0,0 +1,2 @@ +export { default } from './PerpsMoreSection'; +export type { PerpsMoreItem } from './PerpsMoreSection'; diff --git a/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.styles.ts b/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.styles.ts deleted file mode 100644 index 0af308556a4..00000000000 --- a/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.styles.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { StyleSheet } from 'react-native'; -import { Theme } from '../../../../../util/theme/models'; - -const styleSheet = (params: { theme: Theme }) => { - const { theme } = params; - const { colors } = theme; - - return StyleSheet.create({ - container: { - marginTop: 24, - gap: 1, // Small gap creates separator line between grouped items - }, - itemWrapper: { - backgroundColor: colors.background.section, - overflow: 'hidden', - }, - itemFirst: { - borderTopLeftRadius: 12, - borderTopRightRadius: 12, - }, - itemLast: { - borderBottomLeftRadius: 12, - borderBottomRightRadius: 12, - }, - listItem: { - paddingVertical: 12, - }, - }); -}; - -export default styleSheet; diff --git a/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.test.tsx b/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.test.tsx deleted file mode 100644 index 23c98dcd864..00000000000 --- a/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.test.tsx +++ /dev/null @@ -1,257 +0,0 @@ -import React from 'react'; -import { render, fireEvent } from '@testing-library/react-native'; -import { IconName } from '@metamask/design-system-react-native'; -import PerpsNavigationCard, { - type NavigationItem, -} from './PerpsNavigationCard'; - -jest.mock('../../../../hooks/useStyles', () => ({ - useStyles: () => ({ - styles: { - container: {}, - itemWrapper: {}, - itemFirst: {}, - itemLast: {}, - listItem: {}, - }, - }), -})); - -jest.mock('./PerpsNavigationCard.styles', () => ({})); - -jest.mock( - '../../../../../component-library/components/List/ListItem', - () => 'ListItem', -); -jest.mock( - '../../../../../component-library/components/List/ListItemColumn', - () => ({ - __esModule: true, - default: 'ListItemColumn', - WidthType: { - Fill: 'Fill', - Auto: 'Auto', - }, - }), -); -jest.mock('@metamask/design-system-react-native', () => ({ - ...jest.requireActual('@metamask/design-system-react-native'), - Icon: 'Icon', - IconName: { - Setting: 'Setting', - Notification: 'Notification', - ArrowRight: 'ArrowRight', - }, -})); -jest.mock('../../../../../component-library/components/Texts/Text', () => ({ - __esModule: true, - default: 'Text', - TextVariant: { - BodyMD: 'BodyMD', - }, - TextColor: { - Default: 'Default', - }, -})); - -describe('PerpsNavigationCard', () => { - const mockOnPress = jest.fn(); - - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('renders with single item', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - }, - ]; - - // Act - const { getByText } = render(); - - // Assert - expect(getByText('Settings')).toBeTruthy(); - }); - - it('renders with multiple items', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - }, - { - label: 'Notifications', - onPress: mockOnPress, - }, - { - label: 'Help', - onPress: mockOnPress, - }, - ]; - - // Act - const { getByText } = render(); - - // Assert - expect(getByText('Settings')).toBeTruthy(); - expect(getByText('Notifications')).toBeTruthy(); - expect(getByText('Help')).toBeTruthy(); - }); - - it('handles onPress callback when item is pressed', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - testID: 'settings-item', - }, - ]; - - // Act - const { getByTestId } = render(); - const item = getByTestId('settings-item'); - fireEvent.press(item); - - // Assert - expect(mockOnPress).toHaveBeenCalledTimes(1); - }); - - it('calls correct onPress for each item', () => { - // Arrange - const onPress1 = jest.fn(); - const onPress2 = jest.fn(); - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: onPress1, - testID: 'settings-item', - }, - { - label: 'Notifications', - onPress: onPress2, - testID: 'notifications-item', - }, - ]; - - // Act - const { getByTestId } = render(); - fireEvent.press(getByTestId('settings-item')); - fireEvent.press(getByTestId('notifications-item')); - - // Assert - expect(onPress1).toHaveBeenCalledTimes(1); - expect(onPress2).toHaveBeenCalledTimes(1); - }); - - it('renders with icon when iconName is provided', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - iconName: IconName.Setting, - onPress: mockOnPress, - }, - ]; - - // Act - const { UNSAFE_getAllByType } = render( - , - ); - const icons = UNSAFE_getAllByType('Icon' as never); - - // Assert - Should have both the left icon and the right arrow icon - expect(icons.length).toBeGreaterThanOrEqual(2); - }); - - it('renders without left icon when iconName is not provided', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - }, - ]; - - // Act - const { UNSAFE_getAllByType } = render( - , - ); - const icons = UNSAFE_getAllByType('Icon' as never); - - // Assert - Should have only the right arrow icon - expect(icons.length).toBe(1); - }); - - it('shows arrow icon by default', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - }, - ]; - - // Act - const { UNSAFE_getAllByType } = render( - , - ); - const icons = UNSAFE_getAllByType('Icon' as never); - - // Assert - Should render arrow icon - expect(icons.length).toBeGreaterThan(0); - }); - - it('hides arrow icon when showArrow is false', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - showArrow: false, - }, - ]; - - // Act - const { UNSAFE_queryAllByType } = render( - , - ); - const icons = UNSAFE_queryAllByType('Icon' as never); - - // Assert - Should not render any icons (no arrow, no left icon) - expect(icons.length).toBe(0); - }); - - it('renders empty list when items array is empty', () => { - // Arrange - const items: NavigationItem[] = []; - - // Act - const { queryByText } = render(); - - // Assert - expect(queryByText('Settings')).toBeNull(); - }); - - it('renders items with testID when provided', () => { - // Arrange - const items: NavigationItem[] = [ - { - label: 'Settings', - onPress: mockOnPress, - testID: 'custom-test-id', - }, - ]; - - // Act - const { getByTestId } = render(); - - // Assert - expect(getByTestId('custom-test-id')).toBeTruthy(); - }); -}); diff --git a/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.tsx b/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.tsx deleted file mode 100644 index 2360285f0e2..00000000000 --- a/app/components/UI/Perps/components/PerpsNavigationCard/PerpsNavigationCard.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react'; -import { - Icon, - IconColor, - IconName, - IconSize, -} from '@metamask/design-system-react-native'; -import { TouchableOpacity, View } from 'react-native'; -import ListItem from '../../../../../component-library/components/List/ListItem'; -import ListItemColumn, { - WidthType, -} from '../../../../../component-library/components/List/ListItemColumn'; -import Text, { - TextColor, - TextVariant, -} from '../../../../../component-library/components/Texts/Text'; -import { useStyles } from '../../../../hooks/useStyles'; -import styleSheet from './PerpsNavigationCard.styles'; - -/** - * Represents a single navigation item in the card - */ -export interface NavigationItem { - /** - * The label text to display - */ - label: string; - /** - * Optional icon to display on the left - */ - iconName?: IconName; - /** - * Optional flag to show/hide the right arrow icon (defaults to true) - */ - showArrow?: boolean; - /** - * Optional color for the right arrow icon (defaults to IconColor.IconAlternative) - */ - arrowColor?: IconColor; - /** - * Callback function when the item is pressed - */ - onPress: () => void; - /** - * Optional test ID for E2E testing - */ - testID?: string; -} - -interface PerpsNavigationCardProps { - /** - * Array of navigation items to display in the grouped card - */ - items: NavigationItem[]; -} - -/** - * A grouped navigation card component for Perps with iOS-style list appearance. - * Displays multiple navigation items in a single card with: - * - Rounded corners on first and last items - * - Thin separator lines between items (1px gap) - * - Consistent background color and styling - * - * Follows the ListItem design pattern: [Icon] Text [Arrow] - */ -const PerpsNavigationCard: React.FC = ({ items }) => { - const { styles } = useStyles(styleSheet, {}); - - return ( - - {items.map((item, index) => { - const isFirst = index === 0; - const isLast = index === items.length - 1; - const itemStyle = [ - styles.itemWrapper, - isFirst && styles.itemFirst, - isLast && styles.itemLast, - ]; - - return ( - - - {item.iconName && ( - - )} - - - {item.label} - - - {(item.showArrow ?? true) && ( - - - - )} - - - ); - })} - - ); -}; - -export default PerpsNavigationCard; diff --git a/app/components/UI/Perps/components/PerpsNavigationCard/index.ts b/app/components/UI/Perps/components/PerpsNavigationCard/index.ts deleted file mode 100644 index 894e9fa2ceb..00000000000 --- a/app/components/UI/Perps/components/PerpsNavigationCard/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './PerpsNavigationCard'; diff --git a/app/components/UI/Ramp/Views/Modals/SettingsModal/SettingsModal.tsx b/app/components/UI/Ramp/Views/Modals/SettingsModal/SettingsModal.tsx index 3da096430cc..013f32a0932 100644 --- a/app/components/UI/Ramp/Views/Modals/SettingsModal/SettingsModal.tsx +++ b/app/components/UI/Ramp/Views/Modals/SettingsModal/SettingsModal.tsx @@ -212,7 +212,7 @@ function SettingsModal() { {supportUrl && ( { {/* Support Row */} - } + startAccessory={} label={strings('app_settings.contact_support')} onPress={onPressSupport} testID={AccountsMenuSelectorsIDs.SUPPORT} diff --git a/app/components/Views/Homepage/Sections/More/MoreSection.tsx b/app/components/Views/Homepage/Sections/More/MoreSection.tsx index b15e9d59389..1c90e0e596e 100644 --- a/app/components/Views/Homepage/Sections/More/MoreSection.tsx +++ b/app/components/Views/Homepage/Sections/More/MoreSection.tsx @@ -141,8 +141,7 @@ const MoreSection = () => { />