@luxexchange/lx 1.0.0

package/src/features/tokens/warnings/TokenWarningCard.tsx

@@ -0,0 +1,129 @@
+import { useTranslation } from 'react-i18next'
+import { TouchableArea } from '@luxfi/ui/src'
+import { InlineWarningCard } from '@luxexchange/lx/src/components/InlineWarningCard/InlineWarningCard'
+import { WarningSeverity } from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { ElementName } from '@luxexchange/lx/src/features/telemetry/constants'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+import { useBlockaidFeeComparisonAnalytics } from '@luxexchange/lx/src/features/tokens/warnings/hooks/useBlockaidFeeComparisonAnalytics'
+import {
+  getSeverityFromTokenProtectionWarning,
+  getTokenProtectionFeeOnTransfer,
+  getTokenProtectionWarning,
+  getTokenWarningSeverity,
+  useCardHeaderText,
+  useCardSubtitleText,
+  useTokenWarningCardText,
+} from '@luxexchange/lx/src/features/tokens/warnings/safetyUtils'
+import { TokenProtectionWarning } from '@luxexchange/lx/src/features/tokens/warnings/types'
+import { currencyIdToAddress } from '@luxexchange/lx/src/utils/currencyId'
+
+type TokenWarningCardProps = {
+  currencyInfo: Maybe<CurrencyInfo>
+  tokenProtectionWarningOverride?: TokenProtectionWarning
+  feeOnTransferOverride?: {
+    buyFeePercent?: number
+    sellFeePercent?: number
+  }
+  onPress?: () => void
+  headingTestId?: string
+  descriptionTestId?: string
+  hideCtaIcon?: boolean
+  checked?: boolean
+  setChecked?: (checked: boolean) => void
+}
+
+function useTokenWarningOverrides({
+  currencyInfo,
+  tokenProtectionWarningOverride,
+  feeOnTransferOverride,
+}: {
+  currencyInfo: Maybe<CurrencyInfo>
+  tokenProtectionWarningOverride?: TokenProtectionWarning
+  feeOnTransferOverride?: {
+    buyFeePercent?: number
+    sellFeePercent?: number
+  }
+}): { severity: WarningSeverity; heading: string | null; description: string | null } {
+  const { heading: headingDefault, description: descriptionDefault } = useTokenWarningCardText(currencyInfo)
+  const { buyFeePercent, sellFeePercent } = getTokenProtectionFeeOnTransfer(currencyInfo)
+
+  const severity = tokenProtectionWarningOverride
+    ? getSeverityFromTokenProtectionWarning(tokenProtectionWarningOverride)
+    : getTokenWarningSeverity(currencyInfo)
+
+  const headingOverride = useCardHeaderText({
+    tokenProtectionWarning: tokenProtectionWarningOverride ?? TokenProtectionWarning.None,
+  })
+
+  const displayedBuyFeePercent = feeOnTransferOverride?.buyFeePercent ?? buyFeePercent
+  const displayedSellFeePercent = feeOnTransferOverride?.sellFeePercent ?? sellFeePercent
+  const descriptionOverride = useCardSubtitleText({
+    tokenProtectionWarning: tokenProtectionWarningOverride ?? TokenProtectionWarning.None,
+    tokenSymbol: currencyInfo?.currency.symbol,
+    buyFeePercent: displayedBuyFeePercent,
+    sellFeePercent: displayedSellFeePercent,
+  })
+
+  const heading = tokenProtectionWarningOverride ? headingOverride : headingDefault
+  const description = tokenProtectionWarningOverride ? descriptionOverride : descriptionDefault
+
+  return { severity, heading, description }
+}
+
+export function TokenWarningCard({
+  currencyInfo,
+  tokenProtectionWarningOverride,
+  feeOnTransferOverride,
+  headingTestId,
+  descriptionTestId,
+  hideCtaIcon,
+  checked,
+  setChecked,
+  onPress,
+}: TokenWarningCardProps): JSX.Element | null {
+  const { t } = useTranslation()
+  const { severity, heading, description } = useTokenWarningOverrides({
+    currencyInfo,
+    tokenProtectionWarningOverride,
+    feeOnTransferOverride,
+  })
+  useBlockaidFeeComparisonAnalytics(currencyInfo)
+
+  if (!currencyInfo || !severity || !description) {
+    return null
+  }
+
+  const { buyFeePercent, sellFeePercent } = getTokenProtectionFeeOnTransfer(currencyInfo)
+  const analyticsProperties = {
+    tokenSymbol: currencyInfo.currency.symbol,
+    chainId: currencyInfo.currency.chainId,
+    tokenAddress: currencyIdToAddress(currencyInfo.currencyId),
+    warningSeverity: WarningSeverity[severity],
+    tokenProtectionWarning:
+      TokenProtectionWarning[tokenProtectionWarningOverride ?? getTokenProtectionWarning(currencyInfo)],
+    buyFeePercent: feeOnTransferOverride?.buyFeePercent ?? buyFeePercent,
+    sellFeePercent: feeOnTransferOverride?.sellFeePercent ?? sellFeePercent,
+    safetyInfo: currencyInfo.safetyInfo,
+  }
+
+  return (
+    <Trace logPress={!!onPress} element={ElementName.TokenWarningCard} properties={analyticsProperties}>
+      <TouchableArea onPress={onPress}>
+        <InlineWarningCard
+          hideCtaIcon={hideCtaIcon}
+          severity={severity}
+          checkboxLabel={setChecked ? t('common.button.understand') : undefined}
+          heading={heading ?? undefined}
+          description={description}
+          headingTestId={headingTestId}
+          descriptionTestId={descriptionTestId}
+          checked={checked}
+          setChecked={setChecked}
+          analyticsProperties={analyticsProperties}
+          onPressCtaButton={onPress}
+        />
+      </TouchableArea>
+    </Trace>
+  )
+}

package/src/features/tokens/warnings/TokenWarningFlagsTable.tsx

@@ -0,0 +1,142 @@
+import { TFunction } from 'i18next'
+import { PropsWithChildren, useMemo } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Flex, Text } from '@luxfi/ui/src'
+import { Flag } from '@luxfi/ui/src/components/icons/Flag'
+import { CurrencyInfo, TokenList } from '@luxexchange/lx/src/features/dataApi/types'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { getFeeColor } from '@luxexchange/lx/src/features/tokens/warnings/safetyUtils'
+import { TokenProtectionWarning } from '@luxexchange/lx/src/features/tokens/warnings/types'
+import { WarningModalInfoContainer } from '@luxexchange/lx/src/features/tokens/warnings/WarningInfoModalContainer'
+
+function getWarningFlags({
+  currencyInfo,
+  formatPercent,
+  t,
+  tokenProtectionWarning,
+}: {
+  currencyInfo: CurrencyInfo
+  formatPercent: (value: Maybe<string | number>) => string
+  t: TFunction
+  tokenProtectionWarning: TokenProtectionWarning
+}): JSX.Element[] {
+  const flags: JSX.Element[] = []
+
+  const isToken = currencyInfo.currency.isToken
+
+  if (isToken) {
+    // If Blockaid marks the token as having high fees, but we don't have data on token fees, show Blockaid's fees data
+    const buyFeePercent = currencyInfo.currency.buyFeeBps
+      ? currencyInfo.currency.buyFeeBps.toNumber() / 100
+      : currencyInfo.safetyInfo?.blockaidFees?.buyFeePercent
+    const sellFeePercent = currencyInfo.currency.sellFeeBps
+      ? currencyInfo.currency.sellFeeBps.toNumber() / 100
+      : currencyInfo.safetyInfo?.blockaidFees?.sellFeePercent
+
+    if (buyFeePercent) {
+      const buyFeeColor = getFeeColor(buyFeePercent)
+
+      flags.push(
+        <WarningFlag key="buy-fee">
+          <Trans
+            i18nKey="token.safety.warning.feeDescription"
+            components={{
+              fee: (
+                <Text variant="body3" color={buyFeeColor}>
+                  {formatPercent(buyFeePercent)} {t('common.fee').toLowerCase()}
+                </Text>
+              ),
+            }}
+            values={{
+              action: t('common.bought').toLowerCase(),
+            }}
+          />
+        </WarningFlag>,
+      )
+    }
+
+    if (sellFeePercent) {
+      const sellFeeColor = getFeeColor(sellFeePercent)
+
+      flags.push(
+        <WarningFlag key="sell-fee">
+          <Trans
+            i18nKey="token.safety.warning.feeDescription"
+            components={{
+              fee: (
+                <Text variant="body3" color={sellFeeColor}>
+                  {formatPercent(sellFeePercent)} {t('common.fee').toLowerCase()}
+                </Text>
+              ),
+            }}
+            values={{
+              action: t('common.sold').toLowerCase(),
+            }}
+          />
+        </WarningFlag>,
+      )
+    }
+  }
+
+  if (tokenProtectionWarning === TokenProtectionWarning.SpamAirdrop) {
+    flags.push(<WarningFlag key="spam-warning">{t('token.safety.warning.spamsUsers')}</WarningFlag>)
+  }
+
+  if (tokenProtectionWarning === TokenProtectionWarning.MaliciousImpersonator) {
+    flags.push(<WarningFlag key="impersonator-warning">{t('token.safety.warning.impersonator')}</WarningFlag>)
+  }
+
+  if (tokenProtectionWarning === TokenProtectionWarning.MaliciousGeneral) {
+    flags.push(
+      <WarningFlag key="malicious-general-warning">{t('token.safety.warning.flaggedAsMalicious')}</WarningFlag>,
+    )
+  }
+
+  if (tokenProtectionWarning === TokenProtectionWarning.PotentialHoneypot) {
+    flags.push(
+      <WarningFlag key="potential-honeypot-warning">{t('token.safety.warning.flaggedAsSuspicious')}</WarningFlag>,
+    )
+  }
+
+  if (currencyInfo.safetyInfo?.tokenList === TokenList.NonDefault) {
+    flags.push(<WarningFlag key="exchange-warning">{t('token.safety.warning.notListedOnExchanges')}</WarningFlag>)
+  }
+
+  return flags
+}
+
+function WarningFlag({ children }: PropsWithChildren): JSX.Element {
+  return (
+    <Flex row width="100%" alignItems="center" justifyContent="flex-start" gap="$spacing8">
+      <Flag size="$icon.16" color="$neutral2" />
+      <Text variant="body3" color="$neutral2">
+        {children}
+      </Text>
+    </Flex>
+  )
+}
+
+export function TokenWarningFlagsTable({
+  currencyInfo,
+  tokenProtectionWarning,
+}: {
+  currencyInfo: CurrencyInfo
+  tokenProtectionWarning: TokenProtectionWarning
+}): JSX.Element | null {
+  const { t } = useTranslation()
+  const { formatPercent } = useLocalizationContext()
+  const flags = useMemo(
+    () => getWarningFlags({ currencyInfo, formatPercent, t, tokenProtectionWarning }),
+    [currencyInfo, formatPercent, t, tokenProtectionWarning],
+  )
+
+  if (flags.length === 0) {
+    return null
+  }
+
+  return (
+    <WarningModalInfoContainer gap="$spacing8" py="$spacing12">
+      {flags}
+    </WarningModalInfoContainer>
+  )
+}

package/src/features/tokens/warnings/TokenWarningModal.tsx

@@ -0,0 +1,403 @@
+import { TFunction } from 'i18next'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AnimateTransition, Flex, LabeledCheckbox, Text, useSporeColors } from '@luxfi/ui/src'
+import { PoweredByBlockaid } from '@luxexchange/lx/src/components/logos/PoweredByBlockaid'
+import { Modal } from '@luxexchange/lx/src/components/modals/Modal'
+import { getAlertColor } from '@luxexchange/lx/src/components/modals/WarningModal/getAlertColor'
+import { WarningSeverity } from '@luxexchange/lx/src/components/modals/WarningModal/types'
+import { WarningModalContent } from '@luxexchange/lx/src/components/modals/WarningModal/WarningModal'
+import { LearnMoreLink } from '@luxexchange/lx/src/components/text/LearnMoreLink'
+import WarningIcon from '@luxexchange/lx/src/components/warnings/WarningIcon'
+import { luxUrls } from '@luxexchange/lx/src/constants/urls'
+import { CurrencyInfo } from '@luxexchange/lx/src/features/dataApi/types'
+import { submitTokenWarningDataReport } from '@luxexchange/lx/src/features/reporting/reports'
+import { ModalName } from '@luxexchange/lx/src/features/telemetry/constants'
+import Trace from '@luxexchange/lx/src/features/telemetry/Trace'
+import { useBlockaidFeeComparisonAnalytics } from '@luxexchange/lx/src/features/tokens/warnings/hooks/useBlockaidFeeComparisonAnalytics'
+import { useWarningModalCurrenciesDismissed } from '@luxexchange/lx/src/features/tokens/warnings/hooks/useWarningModalCurrenciesDismissed'
+import {
+  getCurrencyFeeOnTransfer,
+  getFeeWarning,
+  getIsFeeRelatedWarning,
+  getSeverityFromTokenProtectionWarning,
+  getShouldHaveCombinedPluralTreatment,
+  getTokenProtectionFeeOnTransfer,
+  getTokenProtectionWarning,
+  getTokenWarningSeverity,
+  useModalHeaderText,
+  useModalSubtitleText,
+} from '@luxexchange/lx/src/features/tokens/warnings/safetyUtils'
+import { TokenWarningFlagsTable } from '@luxexchange/lx/src/features/tokens/warnings/TokenWarningFlagsTable'
+import { TokenProtectionWarning } from '@luxexchange/lx/src/features/tokens/warnings/types'
+import { currencyIdToAddress } from '@luxexchange/lx/src/utils/currencyId'
+import { useEvent } from '@luxfi/utilities/src/react/hooks'
+
+export interface FoTPercent {
+  buyFeePercent?: number
+  sellFeePercent?: number
+}
+
+interface TokenWarningProps {
+  currencyInfo0: CurrencyInfo // required, primary currency
+  currencyInfo1?: CurrencyInfo // defined in case of 2-token warnings; i.e. possible on the web's Pool Details Page or prefilled via /swap?inputAddress=0x...&outputAddress=0x...
+  isInfoOnlyWarning?: boolean // if this is an informational-only warning. Hides the Reject button
+  shouldBeCombinedPlural?: boolean // some 2-token warnings will be combined into one plural modal (see `getShouldHaveCombinedPluralTreatment`)
+  hasSecondWarning?: boolean // true if this is a 2-token warning with two separate warning screens
+  feeOnTransferOverride?: FoTPercent // if defined, forces TokenWarningModal to display FOT content over any other warning content & overrides GQL fee info with TradingApi quote's fee info, which is more correct for dynamic FoT fees
+}
+
+interface TokenWarningModalContentProps extends TokenWarningProps {
+  onRejectButton: () => void
+  onAcknowledgeButton: () => void
+  onDismissTokenWarning0: () => void
+  onDismissTokenWarning1?: () => void
+  onReportSuccess?: () => void
+}
+export interface TokenWarningModalProps extends TokenWarningProps {
+  isVisible: boolean
+  onReject?: () => void // callback on user rejecting warning (i.e., may close the modal & clear all inputs)
+  onToken0BlockAcknowledged?: () => void // callback containing custom behavior for a blocked token
+  onToken1BlockAcknowledged?: () => void
+  closeModalOnly: () => void // callback that purely just closes the modal
+  onAcknowledge: () => void
+  onReportSuccess?: () => void // callback to send a report of an incorrect warning, which enables the report UI when applied
+}
+
+const WARNINGS_ALLOWING_DISMISSAL: TokenProtectionWarning[] = [
+  TokenProtectionWarning.NonDefault,
+  TokenProtectionWarning.FotLow,
+  TokenProtectionWarning.FotHigh,
+  TokenProtectionWarning.SpamAirdrop,
+  TokenProtectionWarning.MaliciousImpersonator,
+  TokenProtectionWarning.MaliciousHoneypot,
+] as const
+
+function allowsDismissWarning(tokenProtectionWarning: TokenProtectionWarning): boolean {
+  return WARNINGS_ALLOWING_DISMISSAL.includes(tokenProtectionWarning)
+}
+
+// eslint-disable-next-line complexity
+function TokenWarningModalContent({
+  currencyInfo0,
+  currencyInfo1,
+  isInfoOnlyWarning,
+  onRejectButton,
+  onAcknowledgeButton,
+  shouldBeCombinedPlural,
+  hasSecondWarning,
+  feeOnTransferOverride,
+  onDismissTokenWarning0,
+  onDismissTokenWarning1,
+  onReportSuccess,
+}: TokenWarningModalContentProps): JSX.Element | null {
+  const { t } = useTranslation()
+
+  useBlockaidFeeComparisonAnalytics(currencyInfo0)
+
+  const tokenProtectionWarning =
+    feeOnTransferOverride?.buyFeePercent || feeOnTransferOverride?.sellFeePercent
+      ? getFeeWarning(Math.max(feeOnTransferOverride.buyFeePercent ?? 0, feeOnTransferOverride.sellFeePercent ?? 0))
+      : getTokenProtectionWarning(currencyInfo0)
+  const severity = getSeverityFromTokenProtectionWarning(tokenProtectionWarning)
+  const tokenSymbol = currencyInfo0.currency.symbol
+
+  // If Blockaid marks the token as having high fees, but we don't have data on token fees, show Blockaid's fees data
+  const isFeeRelatedWarning = getIsFeeRelatedWarning(tokenProtectionWarning)
+  const { buyFeePercent: currencyBuyFeePercent, sellFeePercent: currencySellFeePercent } = getCurrencyFeeOnTransfer(
+    currencyInfo0.currency,
+  )
+  const { buyFeePercent, sellFeePercent } = getTokenProtectionFeeOnTransfer(currencyInfo0)
+  const blockaidFeesData = currencyInfo0.safetyInfo?.blockaidFees
+  const showBlockaidFeesData =
+    isFeeRelatedWarning &&
+    blockaidFeesData &&
+    ((blockaidFeesData.buyFeePercent &&
+      (feeOnTransferOverride?.buyFeePercent ?? currencyBuyFeePercent) === undefined) ||
+      (blockaidFeesData.sellFeePercent &&
+        (feeOnTransferOverride?.sellFeePercent ?? currencySellFeePercent) === undefined))
+  const displayedBuyFeePercent = feeOnTransferOverride?.buyFeePercent ?? buyFeePercent
+  const displayedSellFeePercent = feeOnTransferOverride?.sellFeePercent ?? sellFeePercent
+
+  const showBlockaidLogo =
+    (!isFeeRelatedWarning && severity !== WarningSeverity.Low && severity !== WarningSeverity.Blocked) ||
+    showBlockaidFeesData
+
+  const titleText = useModalHeaderText({
+    tokenSymbol0: tokenSymbol,
+    tokenSymbol1: currencyInfo1?.currency.symbol,
+    tokenProtectionWarning,
+    shouldHavePluralTreatment: shouldBeCombinedPlural,
+  })
+  const subtitleText = useModalSubtitleText({
+    tokenProtectionWarning,
+    tokenSymbol,
+    buyFeePercent: displayedBuyFeePercent,
+    sellFeePercent: displayedSellFeePercent,
+    shouldHavePluralTreatment: shouldBeCombinedPlural,
+  })
+  const { headerText: titleTextColor } = getAlertColor(severity)
+
+  // Logic for "don't show again" dismissal of warnings
+  const [dontShowAgain, setDontShowAgain] = useState<boolean>(false)
+  const showCheckbox = !isInfoOnlyWarning && allowsDismissWarning(tokenProtectionWarning)
+
+  const onAcknowledge = (): void => {
+    if (showCheckbox) {
+      if (dontShowAgain) {
+        onDismissTokenWarning0()
+        onDismissTokenWarning1?.()
+      }
+    }
+    onAcknowledgeButton()
+  }
+
+  const showReportUI = tokenProtectionWarning > TokenProtectionWarning.NonDefault
+
+  const sendReport = useEvent((reportText: string) => {
+    // send report to amplitude
+    submitTokenWarningDataReport({
+      chainId: currencyInfo0.currency.chainId,
+      tokenAddress: currencyIdToAddress(currencyInfo0.currencyId),
+      tokenName: currencyInfo0.currency.name,
+      reportText,
+    })
+
+    // report success for the given case
+    onReportSuccess?.()
+
+    // close the modal
+    onAcknowledgeButton()
+  })
+
+  if (severity === WarningSeverity.None) {
+    return null
+  }
+
+  const { rejectText, acknowledgeText } = getWarningModalButtonTexts({
+    t,
+    isInfoOnlyWarning: !!isInfoOnlyWarning,
+    severity,
+    hasSecondWarning: !!hasSecondWarning,
+  })
+
+  const analyticsProperties = {
+    tokenSymbol,
+    tokenAddress: currencyIdToAddress(currencyInfo0.currencyId),
+    chainId: currencyInfo0.currency.chainId,
+    // if both tokens are low or blocked severities, their warnings are combined into 1 plural screen
+    tokenSymbol1: currencyInfo1?.currency.symbol,
+    tokenAddress1: currencyInfo1 && currencyIdToAddress(currencyInfo1.currencyId),
+    warningSeverity: WarningSeverity[severity],
+    tokenProtectionWarning: TokenProtectionWarning[tokenProtectionWarning],
+    buyFeePercent: displayedBuyFeePercent,
+    sellFeePercent: displayedSellFeePercent,
+    safetyInfo: currencyInfo0.safetyInfo,
+    ...(showCheckbox && { dismissTokenWarningCheckbox: dontShowAgain }),
+  }
+
+  return (
+    <Trace logImpression modal={ModalName.TokenWarningModal} properties={analyticsProperties}>
+      <Flex>
+        <WarningModalContent
+          modalName={ModalName.TokenWarningModal}
+          captionComponent={
+            <Text color="$neutral2" textAlign="center" variant="body3">
+              {`${subtitleText} `}
+              <LearnMoreLink
+                onlyUseText
+                display="inline"
+                textColor="$neutral1"
+                textVariant="buttonLabel3"
+                url={luxUrls.helpArticleUrls.tokenWarning}
+              />
+            </Text>
+          }
+          rejectText={rejectText}
+          acknowledgeText={acknowledgeText}
+          icon={<WarningIcon heroIcon inModal severity={severity} size="$icon.24" />}
+          backgroundIconColor={false}
+          severity={severity}
+          titleComponent={
+            <Text color={titleTextColor} variant="subheading1">
+              {titleText}
+            </Text>
+          }
+          sendReport={showReportUI ? sendReport : undefined}
+          onReject={onRejectButton}
+          onClose={onRejectButton}
+          onAcknowledge={onAcknowledge}
+        >
+          {tokenProtectionWarning !== TokenProtectionWarning.NonDefault && (
+            <TokenWarningFlagsTable currencyInfo={currencyInfo0} tokenProtectionWarning={tokenProtectionWarning} />
+          )}
+
+          {showBlockaidLogo && <PoweredByBlockaid />}
+
+          {showCheckbox && (
+            // only show "Don't show this warning again" checkbox if this is an actionable modal & the token is low-severity
+            <LabeledCheckbox
+              checked={dontShowAgain}
+              checkedColor="$neutral1"
+              text={
+                <Text color="$neutral2" variant="buttonLabel3">
+                  {t('token.safety.warning.dontShowWarningAgain')}
+                </Text>
+              }
+              size="$icon.16"
+              gap="$spacing8"
+              onCheckPressed={() => setDontShowAgain((s: boolean) => !s)}
+            />
+          )}
+        </WarningModalContent>
+      </Flex>
+    </Trace>
+  )
+}
+
+/**
+ * Warning speedbump for selecting certain tokens.
+ */
+export default function TokenWarningModal({
+  isVisible,
+  currencyInfo0: t0,
+  currencyInfo1: t1,
+  isInfoOnlyWarning,
+  feeOnTransferOverride,
+  onReject,
+  onToken0BlockAcknowledged,
+  onToken1BlockAcknowledged,
+  onAcknowledge,
+  closeModalOnly,
+  onReportSuccess,
+}: TokenWarningModalProps): JSX.Element | null {
+  const colors = useSporeColors()
+  const [warningIndex, setWarningIndex] = useState<0 | 1>(0)
+
+  // Check for dismissed warnings
+  const warningModalCurrencies = useWarningModalCurrenciesDismissed({ t0, t1, isInfoOnlyWarning })
+  if (!warningModalCurrencies) {
+    return null
+  }
+  const { currencyInfo0, currencyInfo1, onDismissTokenWarning0, onDismissTokenWarning1 } = warningModalCurrencies
+
+  // If BOTH tokens are blocked or BOTH are low-severity, they'll be combined into one plural modal
+  const combinedPlural = getShouldHaveCombinedPluralTreatment(currencyInfo0, currencyInfo1)
+  const isBlocked0 = getTokenWarningSeverity(currencyInfo0) === WarningSeverity.Blocked
+  const isBlocked1 = getTokenWarningSeverity(currencyInfo1) === WarningSeverity.Blocked
+
+  const hasSecondWarning = Boolean(!combinedPlural && getTokenWarningSeverity(currencyInfo1) !== WarningSeverity.None)
+
+  return (
+    <Modal
+      backgroundColor={colors.surface1.val}
+      isModalOpen={isVisible}
+      name={ModalName.TokenWarningModal}
+      skipLogImpression={true} // impression trace logged in TokenWarningModalContent instead to handle multi-token warnings
+      onClose={onReject ?? closeModalOnly}
+    >
+      {hasSecondWarning && (
+        <Flex row $sm={{ position: 'absolute', top: -16 }}>
+          <Text variant="body2">{warningIndex + 1}</Text>
+          <Text color="$neutral2" variant="body2">
+            {' / 2'}
+          </Text>
+        </Flex>
+      )}
+      <AnimateTransition currentIndex={warningIndex} animationType={warningIndex === 0 ? 'forward' : 'backward'}>
+        <TokenWarningModalContent
+          currencyInfo0={currencyInfo0}
+          currencyInfo1={combinedPlural ? currencyInfo1 : undefined}
+          isInfoOnlyWarning={!hasSecondWarning && isInfoOnlyWarning} // modal should be actionable if it is a 2-token warning (go to next token)
+          hasSecondWarning={hasSecondWarning}
+          shouldBeCombinedPlural={combinedPlural}
+          feeOnTransferOverride={feeOnTransferOverride}
+          onReportSuccess={onReportSuccess}
+          onRejectButton={onReject ?? closeModalOnly}
+          onAcknowledgeButton={() => {
+            if (hasSecondWarning) {
+              setWarningIndex(1)
+            } else if (isBlocked0) {
+              // If both tokens are blocked, they'll be combined into one plural modal. See `getShouldHaveCombinedPluralTreatment`.
+              combinedPlural && isBlocked1 && onToken1BlockAcknowledged?.()
+              onToken0BlockAcknowledged?.()
+              closeModalOnly()
+            } else if (isInfoOnlyWarning) {
+              closeModalOnly()
+            } else {
+              onAcknowledge()
+            }
+          }}
+          onDismissTokenWarning0={onDismissTokenWarning0}
+          onDismissTokenWarning1={onDismissTokenWarning1}
+        />
+        {hasSecondWarning && currencyInfo1 && (
+          <TokenWarningModalContent
+            hasSecondWarning
+            currencyInfo0={currencyInfo1}
+            onReportSuccess={onReportSuccess}
+            onDismissTokenWarning0={onDismissTokenWarning1}
+            onRejectButton={() => {
+              setWarningIndex(0)
+            }}
+            onAcknowledgeButton={() => {
+              if (isBlocked0 || isBlocked1) {
+                isBlocked0 && onToken0BlockAcknowledged?.()
+                isBlocked1 && onToken1BlockAcknowledged?.()
+                closeModalOnly()
+              } else {
+                onAcknowledge()
+              }
+            }}
+          />
+        )}
+      </AnimateTransition>
+    </Modal>
+  )
+}
+
+/*
+Logic explanation
+
+Reject button text
+- if this is an informational-only warning or a 2-token warning, we should always show the Reject / back button
+- or, if a token is blocked, it should not have a Reject button, only an Acknowledge button
+
+Acknowledge button text
+- if this is an informational-only warning, we don't show the Acknowledge button at all
+- if a token is blocked & is not part of a 2-token warning, the Acknowledge button should say "Close"
+- otherwise, Acknowledge button should say "Continue"
+*/
+function getWarningModalButtonTexts({
+  t,
+  isInfoOnlyWarning,
+  severity,
+  hasSecondWarning,
+}: {
+  t: TFunction
+  isInfoOnlyWarning: boolean
+  severity: WarningSeverity
+  hasSecondWarning: boolean
+}): {
+  rejectText: string | undefined
+  acknowledgeText: string | undefined
+} {
+  if (isInfoOnlyWarning) {
+    return {
+      rejectText: t('common.button.close'),
+      acknowledgeText: undefined,
+    }
+  }
+
+  if (severity === WarningSeverity.Blocked && !hasSecondWarning) {
+    return {
+      rejectText: undefined,
+      acknowledgeText: t('common.button.close'),
+    }
+  }
+
+  return {
+    rejectText: t('common.button.goBack'),
+    acknowledgeText: t('common.button.continue'),
+  }
+}

package/src/features/tokens/warnings/WarningInfoModalContainer.tsx

@@ -0,0 +1,11 @@
+import { Flex, styled } from '@luxfi/ui/src'
+import { isMobileApp } from '@luxfi/utilities/src/platform'
+
+export const WarningModalInfoContainer = styled(Flex, {
+  width: '100%',
+  backgroundColor: '$surface2',
+  px: '$spacing16',
+  py: isMobileApp ? '$spacing8' : '$spacing12',
+  alignItems: 'center',
+  flexWrap: 'nowrap',
+})