[pull] main from MetaMask:main

app/component-library/components-temp/Tabs/TabsIconBar/TabsIconBar.test.tsx

@@ -21,7 +21,7 @@ describe('TabsIconBar', () => {
     {
       key: 'tab1',
       label: 'Portfolio',
-      iconName: IconName.Portfolio,
+      iconName: IconName.PieChart,
       content: null,
     },
     {
@@ -118,7 +118,7 @@ describe('TabsIconBar', () => {
         {
           key: 'tab1',
           label: 'Portfolio',
-          iconName: IconName.Portfolio,
+          iconName: IconName.PieChart,
           content: null,
         },
         {
@@ -393,7 +393,7 @@ describe('TabsIconBar', () => {
         {
           key: 'new1',
           label: 'New A',
-          iconName: IconName.Portfolio,
+          iconName: IconName.PieChart,
           content: null,
         },
         {

app/component-library/components-temp/Tabs/TabsIconList/TabsIconList.test.tsx

@@ -47,7 +47,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Portfolio Content</Text>
           </View>
@@ -68,7 +68,7 @@ describe('TabsIconList', () => {
         <TabsIconList initialActiveIndex={1}>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -90,7 +90,7 @@ describe('TabsIconList', () => {
           <View
             key="t1"
             {...({
-              ...tabViewProps('Portfolio', IconName.Portfolio),
+              ...tabViewProps('Portfolio', IconName.PieChart),
               isDisabled: true,
             } as object)}
           >
@@ -115,7 +115,7 @@ describe('TabsIconList', () => {
           <View
             key="t1"
             {...({
-              ...tabViewProps('Portfolio', IconName.Portfolio),
+              ...tabViewProps('Portfolio', IconName.PieChart),
               isDisabled: true,
             } as object)}
           >
@@ -140,7 +140,7 @@ describe('TabsIconList', () => {
         <TabsIconList testID="list" tabsListContentTwClassName="bg-red-500">
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -156,7 +156,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Portfolio Content</Text>
           </View>
@@ -180,7 +180,7 @@ describe('TabsIconList', () => {
         <TabsIconList onChangeTab={mockOnChangeTab}>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -207,7 +207,7 @@ describe('TabsIconList', () => {
         <TabsIconList onChangeTab={mockOnChangeTab}>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -237,7 +237,7 @@ describe('TabsIconList', () => {
         <TabsIconList onChangeTab={mockOnChangeTab}>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -265,7 +265,7 @@ describe('TabsIconList', () => {
         <TabsIconList ref={ref}>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -296,7 +296,7 @@ describe('TabsIconList', () => {
         <TabsIconList ref={ref} initialActiveIndex={0}>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -326,7 +326,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -359,7 +359,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -395,7 +395,7 @@ describe('TabsIconList', () => {
           <TabsIconList initialActiveIndex={0}>
             <View
               key="t1"
-              {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+              {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
             >
               <Text>Content 1</Text>
             </View>
@@ -420,7 +420,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -444,7 +444,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="t1"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Content 1</Text>
           </View>
@@ -474,7 +474,7 @@ describe('TabsIconList', () => {
         {
           key: 'p-tab',
           label: 'Portfolio',
-          icon: IconName.Portfolio,
+          icon: IconName.PieChart,
           content: 'Portfolio Content',
         },
         {
@@ -526,7 +526,7 @@ describe('TabsIconList', () => {
         {
           key: 'p-tab',
           label: 'Portfolio',
-          icon: IconName.Portfolio,
+          icon: IconName.PieChart,
           content: 'Portfolio Content',
         },
         {
@@ -555,7 +555,7 @@ describe('TabsIconList', () => {
         <TabsIconList>
           <View
             key="p-tab"
-            {...(tabViewProps('Portfolio', IconName.Portfolio) as object)}
+            {...(tabViewProps('Portfolio', IconName.PieChart) as object)}
           >
             <Text>Portfolio Content</Text>
           </View>

app/component-library/components-temp/Tabs/TabsIconTab/TabsIconTab.test.tsx

@@ -9,7 +9,7 @@ import { IconName } from '../../../components/Icons/Icon/Icon.types';
 describe('TabsIconTab', () => {
   const defaultProps = {
     label: 'Portfolio',
-    iconName: IconName.Portfolio,
+    iconName: IconName.PieChart,
     isActive: false,
     onPress: jest.fn(),
   };
@@ -108,7 +108,7 @@ describe('TabsIconTab', () => {
   describe('Icon', () => {
     it('renders all supported icon names without throwing', () => {
       const icons: IconName[] = [
-        IconName.Portfolio,
+        IconName.PieChart,
         IconName.Candlestick,
         IconName.Predictions,
       ];

app/component-library/components/Icons/Icon/Icon.assets.ts

@@ -167,6 +167,8 @@ import monitorSVG from './assets/monitor.svg';
 import morehorizontalSVG from './assets/more-horizontal.svg';
 import moreverticalSVG from './assets/more-vertical.svg';
 import mountainflagSVG from './assets/mountain-flag.svg';
+import musdfilledSVG from './assets/musd-filled.svg';
+import musdSVG from './assets/musd.svg';
 import musicnoteSVG from './assets/music-note.svg';
 import nophotographySVG from './assets/no-photography.svg';
 import notificationSVG from './assets/notification.svg';
@@ -176,13 +178,13 @@ import passwordcheckSVG from './assets/password-check.svg';
 import pendingSVG from './assets/pending.svg';
 import peopleSVG from './assets/people.svg';
 import personcancelSVG from './assets/person-cancel.svg';
+import piechartSVG from './assets/pie-chart.svg';
 import pinSVG from './assets/pin.svg';
 import plantSVG from './assets/plant.svg';
-import pieChartSVG from './assets/pie-chart.svg';
-import predictionsSVG from './assets/predictions.svg';
 import plugSVG from './assets/plug.svg';
 import plusandminusSVG from './assets/plus-and-minus.svg';
 import policyalertSVG from './assets/policy-alert.svg';
+import predictionsSVG from './assets/predictions.svg';
 import printSVG from './assets/print.svg';
 import priorityhighSVG from './assets/priority-high.svg';
 import privacytipSVG from './assets/privacy-tip.svg';
@@ -454,6 +456,8 @@ export const assetByIconName: AssetByIconName = {
   [IconName.MoreHorizontal]: morehorizontalSVG,
   [IconName.MoreVertical]: moreverticalSVG,
   [IconName.MountainFlag]: mountainflagSVG,
+  [IconName.MusdFilled]: musdfilledSVG,
+  [IconName.Musd]: musdSVG,
   [IconName.MusicNote]: musicnoteSVG,
   [IconName.NoPhotography]: nophotographySVG,
   [IconName.Notification]: notificationSVG,
@@ -463,13 +467,13 @@ export const assetByIconName: AssetByIconName = {
   [IconName.Pending]: pendingSVG,
   [IconName.People]: peopleSVG,
   [IconName.PersonCancel]: personcancelSVG,
+  [IconName.PieChart]: piechartSVG,
   [IconName.Pin]: pinSVG,
   [IconName.Plant]: plantSVG,
-  [IconName.Portfolio]: pieChartSVG,
-  [IconName.Predictions]: predictionsSVG,
   [IconName.Plug]: plugSVG,
   [IconName.PlusAndMinus]: plusandminusSVG,
   [IconName.PolicyAlert]: policyalertSVG,
+  [IconName.Predictions]: predictionsSVG,
   [IconName.Print]: printSVG,
   [IconName.PriorityHigh]: priorityhighSVG,
   [IconName.PrivacyTip]: privacytipSVG,

app/component-library/components/Icons/Icon/Icon.types.ts

@@ -237,6 +237,8 @@ export enum IconName {
   MoreHorizontal = 'MoreHorizontal',
   MoreVertical = 'MoreVertical',
   MountainFlag = 'MountainFlag',
+  MusdFilled = 'MusdFilled',
+  Musd = 'Musd',
   MusicNote = 'MusicNote',
   NoPhotography = 'NoPhotography',
   Notification = 'Notification',
@@ -246,13 +248,13 @@ export enum IconName {
   Pending = 'Pending',
   People = 'People',
   PersonCancel = 'PersonCancel',
+  PieChart = 'PieChart',
   Pin = 'Pin',
   Plant = 'Plant',
-  Portfolio = 'Portfolio',
-  Predictions = 'Predictions',
   Plug = 'Plug',
   PlusAndMinus = 'PlusAndMinus',
   PolicyAlert = 'PolicyAlert',
+  Predictions = 'Predictions',
   Print = 'Print',
   PriorityHigh = 'PriorityHigh',
   PrivacyTip = 'PrivacyTip',

app/component-library/components/Navigation/TabBar/TabBar.constants.ts

@@ -14,7 +14,7 @@ export const ICON_BY_TAB_BAR_ICON_KEY: IconByTabBarIconKey = {
   [TabBarIconKey.Setting]: IconName.Setting,
   [TabBarIconKey.Rewards]: IconName.MetamaskFoxOutline,
   [TabBarIconKey.Trending]: IconName.Search,
-  [TabBarIconKey.Money]: IconName.Bank,
+  [TabBarIconKey.Money]: IconName.Musd,
 };
 
 export const LABEL_BY_TAB_BAR_ICON_KEY = {

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -34,7 +34,7 @@ const FILLED_ICONS: Partial<Record<TabBarIconKey, IconName>> = {
   [TabBarIconKey.Activity]: IconName.ClockFilled,
   [TabBarIconKey.Trending]: IconName.Search,
   [TabBarIconKey.Rewards]: IconName.MetamaskFoxFilled,
-  [TabBarIconKey.Money]: IconName.Bank,
+  [TabBarIconKey.Money]: IconName.MusdFilled,
 };
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {

app/components/UI/Perps/routes/index.tsx

@@ -47,7 +47,11 @@ import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 /* eslint-disable-next-line */
 import { NavigationContext } from '@react-navigation/core';
 import { CONFIRMATION_HEADER_CONFIG } from '../constants/perpsConfig';
-import { clearStackNavigatorOptions } from '../../../../constants/navigation/clearStackNavigatorOptions';
+import {
+  clearNativeStackNavigatorOptions,
+  clearStackNavigatorOptions,
+  transparentModalScreenOptions,
+} from '../../../../constants/navigation/clearStackNavigatorOptions';
 
 const Stack = createNativeStackNavigator<PerpsNavigationParamList>();
 const ModalStack = createStackNavigator();
@@ -73,7 +77,7 @@ function getRedesignedConfirmationsHeaderOptions({
     title: '',
     headerBackVisible: false,
     contentStyle: { backgroundColor: 'transparent' },
-    presentation: 'transparentModal',
+    ...transparentModalScreenOptions,
   };
 }
 
@@ -353,9 +357,9 @@ const PerpsScreenStack = () => {
             name={Routes.PERPS.TPSL}
             component={PerpsTPSLView}
             options={{
+              ...transparentModalScreenOptions,
               title: strings('perps.tpsl.title'),
               headerShown: false,
-              presentation: 'transparentModal',
             }}
           />
 
@@ -411,12 +415,8 @@ const PerpsScreenStack = () => {
             name={Routes.PERPS.MODALS.CLOSE_POSITION_MODALS}
             component={PerpsClosePositionBottomSheetStack}
             options={{
-              headerShown: false,
-              contentStyle: {
-                backgroundColor: 'transparent',
-              },
-              animation: 'none',
-              presentation: 'transparentModal',
+              ...clearNativeStackNavigatorOptions,
+              ...transparentModalScreenOptions,
             }}
           />
 
@@ -425,12 +425,8 @@ const PerpsScreenStack = () => {
             name={Routes.PERPS.MODALS.ROOT}
             component={PerpsModalStack}
             options={{
-              headerShown: false,
-              contentStyle: {
-                backgroundColor: 'transparent',
-              },
-              animation: 'none',
-              presentation: 'transparentModal',
+              ...clearNativeStackNavigatorOptions,
+              ...transparentModalScreenOptions,
             }}
           />
 
@@ -442,7 +438,7 @@ const PerpsScreenStack = () => {
             component={PayWithModal}
             options={{
               headerShown: false,
-              presentation: 'transparentModal',
+              ...transparentModalScreenOptions,
             }}
           />