gas-fee-token-toast.tsx

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';
import { Hex } from '@metamask/utils';
import { NATIVE_TOKEN_ADDRESS } from '../../../constants/tokens';
import {
  useGasFeeToken,
  useSelectedGasFeeToken,
} from '../../../hooks/gas/useGasFeeToken';
import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
import { IconName } from '../../../../../../component-library/components/Icons/Icon';
import { useTokenWithBalance } from '../../../hooks/tokens/useTokenWithBalance';
import { getNetworkImageSource } from '../../../../../../util/networks';
import { hasTransactionType } from '../../../utils/transaction';

const IGNORED_TRANSACTION_TYPES = [TransactionType.musdConversion];

export function GasFeeTokenToast() {
  const transactionMetadata = useTransactionMetadataRequest();
  const { chainId } = transactionMetadata || {};
  const toastContext = useContext(ToastContext);
  const toast = toastContext?.toastRef?.current;
  const nativeGasFeeToken = useGasFeeToken({
    tokenAddress: NATIVE_TOKEN_ADDRESS,
  });
  const gasFeeToken = useSelectedGasFeeToken() ?? nativeGasFeeToken;
  const prevRef = useRef(NATIVE_TOKEN_ADDRESS);

  const tokenSelected = useTokenWithBalance(
    gasFeeToken?.tokenAddress,
    chainId as Hex,
  );
  const networkImageSource = getNetworkImageSource({
    chainId: chainId ?? '0x1',
  });

  const isIgnoredType = hasTransactionType(
    transactionMetadata,
    IGNORED_TRANSACTION_TYPES,
  );

  useEffect(() => {
    if (!toast || !gasFeeToken || !transactionMetadata || isIgnoredType) return;
    if (gasFeeToken.tokenAddress === prevRef.current) return;

    prevRef.current = gasFeeToken.tokenAddress;

    toast.showToast({
      labelOptions: [
        {
          label: `${strings('gas_fee_token_toast.message')}${gasFeeToken.symbol}.`,
          isBold: true,
        },
      ],
      variant: ToastVariants.Network,
      hasNoTimeout: false,
      customBottomOffset: 24, // Add custom offset to avoid overlapping with confirmation buttons
      networkImageSource: tokenSelected?.image
        ? { uri: tokenSelected.image }
        : networkImageSource,
      closeButtonOptions: {
        variant: ButtonIconVariant.Icon,
        iconName: IconName.Close,
        onPress: () => {
          toast?.closeToast();
        },
      },
    });
  }, [
    gasFeeToken,
    tokenSelected,
    toast,
    networkImageSource,
    transactionMetadata,
    isIgnoredType,
  ]);

  return null;
}