fix: Polish earn, quick-buy, rewards and gas toast for new animation

app/components/UI/Earn/hooks/useEarnToasts.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,
@@ -19,6 +18,7 @@ import {
 import { useAppThemeFromContext } from '../../../../util/theme';
 import {
   Spinner,
+  IconColor,
   IconSize as ReactNativeDsIconSize,
   Text,
   TextColor,
@@ -66,7 +66,7 @@ interface EarnToastLabelOptions {
 const getEarnToastLabels = ({
   primary,
   secondary,
-  primaryIsBold = false,
+  primaryIsBold = true,
 }: EarnToastLabelOptions) => {
   const labels = [
     {
@@ -95,12 +95,6 @@ const EARN_TOASTS_DEFAULT_OPTIONS: Partial<EarnToastOptions> = {
   hasNoTimeout: false,
 };
 
-const toastStyles = StyleSheet.create({
-  iconWrapper: {
-    marginRight: 16,
-  },
-});
-
 const useEarnToasts = (): {
   showToast: (config: EarnToastOptions) => void;
   EarnToastOptions: EarnToastOptionsConfig;
@@ -130,13 +124,11 @@ const useEarnToasts = (): {
         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: {
@@ -146,9 +138,10 @@ const useEarnToasts = (): {
         hapticsType: NotificationMoment.Warning,
         hasNoTimeout: true,
         startAccessory: (
-          <View style={toastStyles.iconWrapper}>
-            <Spinner spinnerIconProps={{ size: ReactNativeDsIconSize.Lg }} />
-          </View>
+          <Spinner
+            color={IconColor.IconDefault}
+            spinnerIconProps={{ size: ReactNativeDsIconSize.Lg }}
+          />
         ),
       },
       error: {
@@ -158,13 +151,11 @@ const useEarnToasts = (): {
         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}
+          />
         ),
       },
     }),
@@ -245,7 +236,6 @@ const useEarnToasts = (): {
           ...earnBaseToastOptions.error,
           labelOptions: getEarnToastLabels({
             primary: strings('stake.tron.unstaked_banner.error'),
-            primaryIsBold: true,
             ...(errors.length > 0 && {
               secondary: (
                 <Text

app/components/UI/Rewards/hooks/useRewardsToast.test.tsx

@@ -414,8 +414,6 @@ describe('useRewardsToast', () => {
         { label: 'Winner title', isBold: true },
       ]);
       expect(config.startAccessory).toBeDefined();
-      const { getByTestId } = render(config.startAccessory as ReactElement);
-      expect(getByTestId('rewards-nudge-start-accessory-box')).toBeDefined();
       config.linkButtonOptions?.onPress?.();
       config.closeButtonOptions?.onPress?.();
       expect(onCta).toHaveBeenCalledTimes(1);

app/components/UI/Rewards/hooks/useRewardsToast.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useContext, useMemo } from 'react';
 import { ActivityIndicator } from 'react-native';
-import { Box } from '@metamask/design-system-react-native';
 import { ToastContext } from '../../../../component-library/components/Toast';
 import {
   ButtonIconVariant,
@@ -131,9 +130,7 @@ const useRewardsToast = (): {
         hasNoTimeout: true,
         hapticsType: NotificationMoment.Warning,
         startAccessory: (
-          <Box twClassName="p-1 mr-2">
-            <ActivityIndicator size="small" color={theme.colors.icon.default} />
-          </Box>
+          <ActivityIndicator size="small" color={theme.colors.icon.default} />
         ),
         labelOptions: getRewardsToastLabels(title),
         descriptionOptions: getRewardsToastDescriptionLabels(subtitle),
@@ -189,14 +186,12 @@ const useRewardsToast = (): {
         hasNoTimeout: true,
         hapticsType: NotificationMoment.Warning,
         startAccessory: (
-          <Box twClassName="p-1 mr-2">
-            <RewardsNotificationIcon
-              name="notification"
-              width={24}
-              height={24}
-              color={theme.colors.warning.default}
-            />
-          </Box>
+          <RewardsNotificationIcon
+            name="notification"
+            width={24}
+            height={24}
+            color={theme.colors.warning.default}
+          />
         ),
         labelOptions: getRewardsToastLabels(
           strings('rewards.notifications_nudge.title'),
@@ -225,14 +220,12 @@ const useRewardsToast = (): {
         hasNoTimeout: true,
         hapticsType: NotificationMoment.Success,
         startAccessory: (
-          <Box twClassName="p-1 mr-2">
-            <RewardsTrophyIcon
-              name="trophy"
-              width={24}
-              height={24}
-              color={theme.colors.success.default}
-            />
-          </Box>
+          <RewardsTrophyIcon
+            name="trophy"
+            width={24}
+            height={24}
+            color={theme.colors.success.default}
+          />
         ),
         labelOptions: getRewardsToastLabels(title),
         descriptionOptions: { description },

app/components/Views/SocialLeaderboard/TraderPositionView/components/QuickBuy/quickBuyToastOptions.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  Box,
   IconColor as DsIconColor,
   IconSize as DsIconSize,
   Spinner,
@@ -85,12 +84,10 @@ export function buildQuickBuyToastOptions(
         descriptionOptions,
         closeButtonOptions,
         startAccessory: (
-          <Box twClassName="pr-3">
-            <Spinner
-              color={DsIconColor.PrimaryDefault}
-              spinnerIconProps={{ size: DsIconSize.Lg }}
-            />
-          </Box>
+          <Spinner
+            color={DsIconColor.IconDefault}
+            spinnerIconProps={{ size: DsIconSize.Lg }}
+          />
         ),
       };
   }

app/components/Views/confirmations/components/gas/gas-fee-token-toast/gas-fee-token-toast.test.tsx

@@ -156,9 +156,10 @@ describe('GasFeeTokenToast', () => {
     expect(mockShowToast).toHaveBeenCalledWith(
       expect.objectContaining({
         labelOptions: [
-          { label: "You're paying this network fee with ", isBold: false },
-          { label: matchingTokenSymbol, isBold: true },
-          { label: '.', isBold: false },
+          {
+            label: `You're paying this network fee with ${matchingTokenSymbol}.`,
+            isBold: true,
+          },
         ],
         variant: ToastVariants.Network,
         networkImageSource: { uri: matchingTokenImage },

app/components/Views/confirmations/components/gas/gas-fee-token-toast/gas-fee-token-toast.tsx

@@ -2,6 +2,7 @@ import { useContext, useEffect, useRef } from 'react';
 import {
   ToastContext,
   ToastVariants,
+  ButtonIconVariant,
 } from '../../../../../../component-library/components/Toast';
 import { strings } from '../../../../../../../locales/i18n';
 import { TransactionType } from '@metamask/transaction-controller';
@@ -13,7 +14,6 @@ import {
 } from '../../../hooks/gas/useGasFeeToken';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { IconName } from '../../../../../../component-library/components/Icons/Icon';
-import { ButtonVariants } from '../../../../../../component-library/components/Buttons/Button';
 import { useTokenWithBalance } from '../../../hooks/tokens/useTokenWithBalance';
 import { getNetworkImageSource } from '../../../../../../util/networks';
 import { hasTransactionType } from '../../../utils/transaction';
@@ -52,9 +52,10 @@ export function GasFeeTokenToast() {
 
     toast.showToast({
       labelOptions: [
-        { label: strings('gas_fee_token_toast.message'), isBold: false },
-        { label: `${gasFeeToken.symbol}`, isBold: true },
-        { label: '.', isBold: false },
+        {
+          label: `${strings('gas_fee_token_toast.message')}${gasFeeToken.symbol}.`,
+          isBold: true,
+        },
       ],
       variant: ToastVariants.Network,
       hasNoTimeout: false,
@@ -63,18 +64,11 @@ export function GasFeeTokenToast() {
         ? { uri: tokenSelected.image }
         : networkImageSource,
       closeButtonOptions: {
-        variant: ButtonVariants.Primary,
-        endIconName: IconName.Close,
-        label: undefined,
+        variant: ButtonIconVariant.Icon,
+        iconName: IconName.Close,
         onPress: () => {
           toast?.closeToast();
         },
-        style: {
-          backgroundColor: 'transparent',
-          paddingHorizontal: 4,
-          paddingVertical: 10,
-          height: 20,
-        },
       },
     });
   }, [