feat: MUSD-150 quick convert poc

.js.env.example

@@ -109,6 +109,7 @@ export MM_POOLED_STAKING_ENABLED="true"
 export MM_POOLED_STAKING_SERVICE_INTERRUPTION_BANNER_ENABLED="true"
 # mUSD
 export MM_MUSD_CONVERSION_FLOW_ENABLED="false"
+export MM_MUSD_QUICK_CONVERT_ENABLED="false"
 # See app/components/UI/Earn/docs/wildcard-token-list.md for more information.
 export MM_MUSD_CONVERTIBLE_TOKENS_BLOCKLIST=''
 export MM_MUSD_CONVERTIBLE_TOKENS_ALLOWLIST=''

app/components/UI/Earn/Views/EarnMusdConversionEducationView/index.test.tsx

@@ -136,6 +136,8 @@ const mockConversionToken = {
 describe('EarnMusdConversionEducationView', () => {
   const mockDispatch = jest.fn();
   const mockInitiateConversion = jest.fn();
+  const mockInitiateMaxConversion = jest.fn();
+  const mockClearError = jest.fn();
   const mockGoToAggregator = jest.fn();
   const mockGetPreferredPaymentToken = jest.fn();
   const mockGetChainIdForBuyFlow = jest.fn();
@@ -168,7 +170,9 @@ describe('EarnMusdConversionEducationView', () => {
     });
     mockUseParams.mockReturnValue(mockRouteParams);
     mockUseMusdConversion.mockReturnValue({
-      initiateConversion: mockInitiateConversion,
+      initiateMaxConversion: mockInitiateMaxConversion,
+      initiateCustomConversion: mockInitiateConversion,
+      clearError: mockClearError,
       error: null,
       hasSeenConversionEducationScreen: false,
     });
@@ -281,7 +285,7 @@ describe('EarnMusdConversionEducationView', () => {
         );
       });
 
-      // Should call initiateConversion directly, not deeplink logic
+      // Should call initiateCustomConversion directly, not deeplink logic
       await waitFor(() => {
         expect(mockInitiateConversion).toHaveBeenCalledWith({
           preferredPaymentToken: {
@@ -591,7 +595,7 @@ describe('EarnMusdConversionEducationView', () => {
         callOrder.push('dispatch');
       });
       mockInitiateConversion.mockImplementation(async () => {
-        callOrder.push('initiateConversion');
+        callOrder.push('initiateCustomConversion');
       });
 
       const { getByTestId } = renderWithProvider(
@@ -608,13 +612,13 @@ describe('EarnMusdConversionEducationView', () => {
       });
 
       await waitFor(() => {
-        expect(callOrder).toEqual(['dispatch', 'initiateConversion']);
+        expect(callOrder).toEqual(['dispatch', 'initiateCustomConversion']);
       });
     });
   });
 
   describe('conversion initiation', () => {
-    it('calls initiateConversion with correct params when preferredPaymentToken provided', async () => {
+    it('calls initiateCustomConversion with correct params when preferredPaymentToken provided', async () => {
       const { getByTestId } = renderWithProvider(
         <EarnMusdConversionEducationView />,
         { state: {} },
@@ -852,7 +856,7 @@ describe('EarnMusdConversionEducationView', () => {
   });
 
   describe('error handling', () => {
-    it('logs error when initiateConversion throws error', async () => {
+    it('logs error when initiateCustomConversion throws error', async () => {
       const testError = new Error('Conversion failed');
       mockInitiateConversion.mockRejectedValue(testError);
 

app/components/UI/Earn/Views/EarnMusdConversionEducationView/index.tsx

@@ -63,7 +63,7 @@ interface EarnMusdConversionEducationViewRouteParams {
 const EarnMusdConversionEducationView = () => {
   const dispatch = useDispatch();
 
-  const { initiateConversion } = useMusdConversion();
+  const { initiateCustomConversion } = useMusdConversion();
   const { goToBuy } = useRampNavigation();
 
   const { preferredPaymentToken, isDeeplink } =
@@ -243,7 +243,7 @@ const EarnMusdConversionEducationView = () => {
         }
 
         if (deeplinkState.action === 'convert') {
-          await initiateConversion({
+          await initiateCustomConversion({
             preferredPaymentToken: deeplinkState.paymentToken,
             skipEducationCheck: true,
           });
@@ -253,7 +253,7 @@ const EarnMusdConversionEducationView = () => {
 
       // Proceed to conversion flow if we have the required params (normal flow)
       if (!isDeeplink && preferredPaymentToken) {
-        await initiateConversion({
+        await initiateCustomConversion({
           preferredPaymentToken,
           skipEducationCheck: true,
         });
@@ -272,7 +272,7 @@ const EarnMusdConversionEducationView = () => {
     }
   }, [
     dispatch,
-    initiateConversion,
+    initiateCustomConversion,
     preferredPaymentToken,
     submitContinuePressedEvent,
     deeplinkState,

app/components/UI/Earn/Views/MusdQuickConvertView/MusdQuickConvertView.styles.ts

@@ -0,0 +1,52 @@
+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: {
+      flex: 1,
+      padding: 16,
+    },
+    listContainer: {
+      flex: 1,
+    },
+    headerTextContainer: {
+      gap: 8,
+    },
+    balanceCardHeader: {
+      paddingTop: 16,
+      paddingBottom: 8,
+    },
+    headerContainer: {
+      paddingBottom: 16,
+    },
+    emptyContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    loadingContainer: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    listHeaderContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+    },
+    noFeesTag: {
+      backgroundColor: colors.background.muted,
+      paddingHorizontal: 6,
+      borderRadius: 4,
+    },
+    termsApply: {
+      textDecorationLine: 'underline',
+    },
+  });
+};
+
+export default styleSheet;

app/components/UI/Earn/Views/MusdQuickConvertView/MusdQuickConvertView.types.ts

@@ -0,0 +1,12 @@
+/**
+ * Test IDs for the MusdQuickConvertView screen.
+ */
+// TODO: Consider centralizing these test IDs in a separate file later.
+export const MusdQuickConvertViewTestIds = {
+  CONTAINER: 'musd-quick-convert-view-container',
+  TOKEN_LIST: 'musd-quick-convert-view-token-list',
+  EMPTY_STATE: 'musd-quick-convert-view-empty-state',
+  LOADING: 'musd-quick-convert-view-loading',
+  HEADER: 'musd-quick-convert-view-header',
+} as const;
+

app/components/UI/Earn/Views/MusdQuickConvertView/components/MusdBalanceCard/MusdBalanceCard.styles.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../../../util/theme/models';
+
+const styleSheet = (_params: { theme: Theme }) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      justifyContent: 'space-between',
+      flexDirection: 'row',
+    },
+    containerPressed: {
+      opacity: 0.7,
+    },
+    left: {
+      flexDirection: 'row',
+      gap: 16,
+    },
+    right: {
+      alignItems: 'flex-end',
+    },
+    networkRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 2,
+    },
+    tokenIconContainer: {
+      width: 32,
+      height: 32,
+      position: 'relative',
+    },
+    tokenIcon: {
+      width: 32,
+      height: 32,
+    },
+  });
+
+export default styleSheet;