fix: design feedback and unit test

Author: sahar-fehri

app/components/UI/SecurityTrust/Views/SecurityTrustScreen.tsx

@@ -259,8 +259,9 @@ const SecurityTrustScreen: React.FC = () => {
             >
               <Box twClassName="w-3 h-3 rounded-full bg-[#6B7FFF]" />
               <Text
-                variant={TextVariant.BodySm}
+                variant={TextVariant.BodyMd}
                 color={TextColor.TextAlternative}
+                fontWeight={FontWeight.Medium}
               >
                 {strings('security_trust.top_10_holders')}
               </Text>
@@ -293,8 +294,9 @@ const SecurityTrustScreen: React.FC = () => {
             >
               <Box twClassName="w-3 h-3 rounded-full bg-[rgba(133,139,154,0.5)]" />
               <Text
-                variant={TextVariant.BodySm}
+                variant={TextVariant.BodyMd}
                 color={TextColor.TextAlternative}
+                fontWeight={FontWeight.Medium}
               >
                 {strings('security_trust.other')}
               </Text>
@@ -457,7 +459,7 @@ const SecurityTrustScreen: React.FC = () => {
             <Box
               flexDirection={BoxFlexDirection.Row}
               alignItems={BoxAlignItems.Start}
-              gap={4}
+              gap={2}
               twClassName="w-full flex-wrap"
             >
               {metadata.externalLinks.homepage && (

app/components/UI/TokenDetails/components/SecurityBadgeBottomSheet.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import SecurityBadgeBottomSheet from './SecurityBadgeBottomSheet';
+import { IconName, IconColor } from '@metamask/design-system-react-native';
+import { strings } from '../../../../../locales/i18n';
+import { MetaMetricsEvents } from '../../../../core/Analytics';
+
+const mockTrackEvent = jest.fn();
+const mockCreateEventBuilder = jest.fn(() => ({
+  addProperties: jest.fn().mockReturnThis(),
+  build: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('../../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
+    trackEvent: mockTrackEvent,
+    createEventBuilder: mockCreateEventBuilder,
+  }),
+}));
+
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 390, height: 844 }),
+  SafeAreaProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+const mockRouteParams = {
+  icon: IconName.SecurityTick,
+  iconColor: IconColor.SuccessDefault,
+  title: 'Test Title',
+  description: 'Test Description',
+  source: 'badge',
+  severity: 'Verified',
+  tokenAddress: '0x1234567890abcdef',
+  tokenSymbol: 'TEST',
+  chainId: '0x1',
+};
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useRoute: () => ({
+    params: mockRouteParams,
+  }),
+  useNavigation: () => ({
+    navigate: jest.fn(),
+    goBack: jest.fn(),
+  }),
+}));
+
+describe('SecurityBadgeBottomSheet', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    const { getByText } = render(<SecurityBadgeBottomSheet />);
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(getByText('Test Description')).toBeTruthy();
+  });
+
+  it('tracks bottom sheet opened event on mount', () => {
+    render(<SecurityBadgeBottomSheet />);
+
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.SECURITY_TRUST_BOTTOM_SHEET_OPENED,
+    );
+    expect(mockTrackEvent).toHaveBeenCalled();
+  });
+
+  it('displays "Got it" button when onProceed is not provided', () => {
+    const { getByText, queryByText } = render(<SecurityBadgeBottomSheet />);
+
+    expect(getByText(strings('security_trust.got_it'))).toBeTruthy();
+    expect(queryByText(strings('security_trust.proceed'))).toBeNull();
+    expect(queryByText(strings('security_trust.cancel'))).toBeNull();
+  });
+
+  it('displays title and description from route params', () => {
+    const { getByText } = render(<SecurityBadgeBottomSheet />);
+
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(getByText('Test Description')).toBeTruthy();
+  });
+});