refactor: migrate coin buttons toast (CEUX-1188)

Isolated ticket-only changes on top of toast-helpers.

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>

Author: cursoragent

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -66,7 +66,7 @@ import IconButton from '../../ui/icon-button';
 import useRampsNavigation from '../../../hooks/ramps/useRampsNavigation/useRampsNavigation';
 import useBridging from '../../../hooks/bridge/useBridging';
 import { ReceiveModal } from '../../multichain/receive-modal';
-import { Toast, ToastContainer } from '../../multichain/toast';
+import { showSuccessToast } from '../../ui/toast/toast';
 import { setActiveNetworkWithError } from '../../../store/actions';
 import {
   getMultichainNativeCurrency,
@@ -85,8 +85,12 @@ import {
   ARC_ERC20_USDC_BRIDGE_ASSET,
   ARC_HEX_CHAIN_ID,
 } from '../assets/enablement/arc';
+import { SECOND } from '../../../../shared/constants/time';
 import { useHandleSendNonEvm } from './hooks/useHandleSendNonEvm';
 
+const BUY_TAB_OPENED_TOAST_ID = 'buy-tab-opened-toast';
+const BUY_TAB_OPENED_TOAST_DURATION = 3 * SECOND;
+
 /**
  * Allows to manually set the default Swap token when clicking on the Swap CTA from
  * native token page. If unset, `getNativeAssetForChainId` of bridge-controller is used.
@@ -196,25 +200,6 @@ const MoreButtonsGroup = ({
   );
 };
 
-const TabOpenedToast = ({ onClose }: { onClose: () => void }) => {
-  const t = useContext(I18nContext);
-
-  return (
-    <ToastContainer>
-      <Toast
-        startAdornment={
-          <Icon name={IconName.Export} color={IconColor.IconDefault} />
-        }
-        text={t('buyTabOpenedToastText')}
-        description={t('buyTabOpenedToastDescription')}
-        onClose={onClose}
-        autoHideTime={3000}
-        onAutoHideToast={onClose}
-      />
-    </ToastContainer>
-  );
-};
-
 type CoinButtonsProps = {
   account: InternalAccount;
   chainId: `0x${string}` | CaipChainId | number;
@@ -246,7 +231,6 @@ const CoinButtons = ({
 
   const { trackEvent, createEventBuilder } = useAnalytics();
   const [showReceiveModal, setShowReceiveModal] = useState(false);
-  const [showTabOpenedToast, setShowTabOpenedToast] = useState(false);
 
   const { address: selectedAddress } = account;
   const navigate = useNavigate();
@@ -430,7 +414,13 @@ const CoinButtons = ({
     // flow enabled, goToBuy navigates in-app, so the "tab opened" toast would
     // be misleading.
     if (!isRampsEnabled) {
-      setShowTabOpenedToast(true);
+      showSuccessToast({
+        dataTestId: BUY_TAB_OPENED_TOAST_ID,
+        title: t('buyTabOpenedToastText'),
+        description: t('buyTabOpenedToastDescription'),
+        id: BUY_TAB_OPENED_TOAST_ID,
+        duration: BUY_TAB_OPENED_TOAST_DURATION,
+      });
     }
     trackEvent(
       createEventBuilder(MetaMetricsEventName.NavBuyButtonClicked)
@@ -623,10 +613,6 @@ const CoinButtons = ({
           },
         ]}
       />
-
-      {showTabOpenedToast && (
-        <TabOpenedToast onClose={() => setShowTabOpenedToast(false)} />
-      )}
     </Box>
   );
 };