fix: Polish money toast for new animation

app/components/UI/Money/hooks/useMoneyToasts.tsx

@@ -4,7 +4,6 @@ import {
   type HapticNotificationMoment,
 } from '../../../../util/haptics';
 import React, { useCallback, useContext, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
 import { strings } from '../../../../../locales/i18n';
 import Icon, {
   IconName,
@@ -143,12 +142,6 @@ const MONEY_TOASTS_DEFAULT_OPTIONS: Partial<MoneyToastOptions> = {
   hasNoTimeout: false,
 };
 
-const toastStyles = StyleSheet.create({
-  iconWrapper: {
-    marginRight: 16,
-  },
-});
-
 const useMoneyToasts = (): {
   showToast: (config: MoneyToastOptions) => void;
   closeToast: () => void;
@@ -192,13 +185,11 @@ const useMoneyToasts = (): {
         iconColor: theme.colors.success.default,
         hapticsType: NotificationMoment.Success,
         startAccessory: (
-          <View style={toastStyles.iconWrapper}>
-            <Icon
-              name={IconName.Confirmation}
-              color={theme.colors.success.default}
-              size={IconSize.Lg}
-            />
-          </View>
+          <Icon
+            name={IconName.Confirmation}
+            color={theme.colors.success.default}
+            size={IconSize.Lg}
+          />
         ),
       },
       inProgress: {
@@ -208,9 +199,7 @@ const useMoneyToasts = (): {
         hapticsType: NotificationMoment.Warning,
         hasNoTimeout: true,
         startAccessory: (
-          <View style={toastStyles.iconWrapper}>
-            <Spinner spinnerIconProps={{ size: ReactNativeDsIconSize.Lg }} />
-          </View>
+          <Spinner spinnerIconProps={{ size: ReactNativeDsIconSize.Lg }} />
         ),
       },
       error: {
@@ -220,13 +209,11 @@ const useMoneyToasts = (): {
         iconColor: theme.colors.error.default,
         hapticsType: NotificationMoment.Error,
         startAccessory: (
-          <View style={toastStyles.iconWrapper}>
-            <Icon
-              name={IconName.CircleX}
-              color={theme.colors.error.default}
-              size={IconSize.Lg}
-            />
-          </View>
+          <Icon
+            name={IconName.CircleX}
+            color={theme.colors.error.default}
+            size={IconSize.Lg}
+          />
         ),
       },
     }),

app/components/UI/Ramp/utils/v2OrderToast.test.ts

@@ -1,4 +1,5 @@
 import { RampsOrderStatus } from '@metamask/ramps-controller';
+import { IconName } from '../../../../component-library/components/Icons/Icon';
 import { ToastVariants } from '../../../../component-library/components/Toast/Toast.types';
 import {
   buildV2OrderToastOptions,
@@ -95,9 +96,11 @@ describe('v2OrderToast', () => {
       const result = buildV2OrderToastOptions(params);
 
       expect(result).not.toBeNull();
-      expect(result?.variant).toBe(ToastVariants.Plain);
+      expect(result?.variant).toBe(ToastVariants.Icon);
       expect(result?.hasNoTimeout).toBe(false);
-      expect(result?.startAccessory).toBeDefined();
+      if (result?.variant === ToastVariants.Icon) {
+        expect(result.iconName).toBe(IconName.Confirmation);
+      }
       expect(result?.labelOptions?.[0]?.label).toBe(
         'Your purchase of 100.5 USDC was successful!',
       );
@@ -122,9 +125,11 @@ describe('v2OrderToast', () => {
       const result = buildV2OrderToastOptions(params);
 
       expect(result).not.toBeNull();
-      expect(result?.variant).toBe(ToastVariants.Plain);
+      expect(result?.variant).toBe(ToastVariants.Icon);
       expect(result?.hasNoTimeout).toBe(false);
-      expect(result?.startAccessory).toBeDefined();
+      if (result?.variant === ToastVariants.Icon) {
+        expect(result.iconName).toBe(IconName.Warning);
+      }
       expect(result?.labelOptions?.[0]?.label).toBe('Purchase of BTC failed');
       expect(result?.labelOptions?.[0]?.isBold).toBe(true);
       expect(result?.descriptionOptions?.description).toBe(
@@ -146,9 +151,11 @@ describe('v2OrderToast', () => {
       const result = buildV2OrderToastOptions(params);
 
       expect(result).not.toBeNull();
-      expect(result?.variant).toBe(ToastVariants.Plain);
+      expect(result?.variant).toBe(ToastVariants.Icon);
       expect(result?.hasNoTimeout).toBe(false);
-      expect(result?.startAccessory).toBeDefined();
+      if (result?.variant === ToastVariants.Icon) {
+        expect(result.iconName).toBe(IconName.Warning);
+      }
       expect(result?.labelOptions?.[0]?.label).toBe(
         'Your purchase was cancelled',
       );
@@ -207,8 +214,10 @@ describe('v2OrderToast', () => {
 
       expect(mockToastService.showToast).toHaveBeenCalledTimes(1);
       const callArg = mockToastService.showToast.mock.calls[0][0];
-      expect(callArg.variant).toBe(ToastVariants.Plain);
-      expect(callArg.startAccessory).toBeDefined();
+      expect(callArg.variant).toBe(ToastVariants.Icon);
+      if (callArg.variant === ToastVariants.Icon) {
+        expect(callArg.iconName).toBe(IconName.Confirmation);
+      }
     });
 
     it('does not call ToastService.showToast for Created status', () => {

app/components/UI/Ramp/utils/v2OrderToast.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
 import {
-  IconColor as ReactNativeDsIconColor,
-  IconSize as ReactNativeDsIconSize,
+  IconColor as DsIconColor,
+  IconSize as DsIconSize,
   Spinner,
 } from '@metamask/design-system-react-native';
-import { lightTheme } from '@metamask/design-tokens';
 import { strings } from '../../../../../locales/i18n';
-import { IconName } from '../../../../component-library/components/Icons/Icon';
+import {
+  IconColor,
+  IconName,
+} from '../../../../component-library/components/Icons/Icon';
 import {
   ToastOptions,
   ToastVariants,
@@ -17,10 +18,6 @@ import Routes from '../../../../constants/navigation/Routes';
 import NavigationService from '../../../../core/NavigationService';
 import ToastService from '../../../../core/ToastService';
 import { renderNumber } from '../../../../util/number';
-import Avatar, {
-  AvatarSize,
-  AvatarVariant,
-} from '../../../../component-library/components/Avatars/Avatar';
 
 export interface V2OrderToastParams {
   orderId: string;
@@ -29,23 +26,6 @@ export interface V2OrderToastParams {
   status: RampsOrderStatus;
 }
 
-const toastStyles = StyleSheet.create({
-  spinnerContainer: {
-    paddingTop: 4,
-    marginRight: 12,
-    alignSelf: 'flex-start',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-  },
-  iconContainer: {
-    paddingTop: 0,
-    marginRight: 12,
-    alignSelf: 'flex-start',
-    alignItems: 'flex-start',
-    justifyContent: 'flex-start',
-  },
-});
-
 /**
  * Builds toast options for V2 Ramps orders based on order status.
  * Returns null for statuses that don't warrant a toast (Created, Precreated, Unknown, IdExpired).
@@ -61,14 +41,10 @@ export function buildV2OrderToastOptions(
         variant: ToastVariants.Plain,
         hasNoTimeout: false,
         customBottomOffset: 32,
-        startAccessory: React.createElement(
-          View,
-          { style: toastStyles.spinnerContainer },
-          React.createElement(Spinner, {
-            color: ReactNativeDsIconColor.PrimaryDefault,
-            spinnerIconProps: { size: ReactNativeDsIconSize.Xl },
-          }),
-        ),
+        startAccessory: React.createElement(Spinner, {
+          color: DsIconColor.IconDefault,
+          spinnerIconProps: { size: DsIconSize.Lg },
+        }),
         labelOptions: [
           {
             label: strings('ramps_v2.notifications.purchase_pending_title', {
@@ -100,19 +76,11 @@ export function buildV2OrderToastOptions(
         ? renderNumber(String(cryptoAmount))
         : '';
       return {
-        variant: ToastVariants.Plain,
+        variant: ToastVariants.Icon,
+        iconName: IconName.Confirmation,
+        iconColor: IconColor.Success,
+        backgroundColor: 'transparent',
         hasNoTimeout: false,
-        startAccessory: React.createElement(
-          View,
-          { style: toastStyles.iconContainer },
-          React.createElement(Avatar, {
-            variant: AvatarVariant.Icon,
-            name: IconName.Confirmation,
-            size: AvatarSize.Lg,
-            iconColor: lightTheme.colors.success.default,
-            backgroundColor: 'transparent',
-          }),
-        ),
         labelOptions: [
           {
             label: strings('ramps_v2.notifications.purchase_completed_title', {
@@ -135,19 +103,11 @@ export function buildV2OrderToastOptions(
 
     case RampsOrderStatus.Failed: {
       return {
-        variant: ToastVariants.Plain,
+        variant: ToastVariants.Icon,
+        iconName: IconName.Warning,
+        iconColor: IconColor.Error,
+        backgroundColor: 'transparent',
         hasNoTimeout: false,
-        startAccessory: React.createElement(
-          View,
-          { style: toastStyles.iconContainer },
-          React.createElement(Avatar, {
-            variant: AvatarVariant.Icon,
-            name: IconName.Warning,
-            size: AvatarSize.Lg,
-            iconColor: lightTheme.colors.error.default,
-            backgroundColor: 'transparent',
-          }),
-        ),
         labelOptions: [
           {
             label: strings('ramps_v2.notifications.purchase_failed_title', {
@@ -166,19 +126,11 @@ export function buildV2OrderToastOptions(
 
     case RampsOrderStatus.Cancelled: {
       return {
-        variant: ToastVariants.Plain,
+        variant: ToastVariants.Icon,
+        iconName: IconName.Warning,
+        iconColor: IconColor.Warning,
+        backgroundColor: 'transparent',
         hasNoTimeout: false,
-        startAccessory: React.createElement(
-          View,
-          { style: toastStyles.iconContainer },
-          React.createElement(Avatar, {
-            variant: AvatarVariant.Icon,
-            name: IconName.Warning,
-            size: AvatarSize.Lg,
-            iconColor: lightTheme.colors.warning.default,
-            backgroundColor: 'transparent',
-          }),
-        ),
         labelOptions: [
           {
             label: strings('ramps_v2.notifications.purchase_cancelled_title'),